Using React context

In this section, we will learn a feature in React called context. We will then refactor the app from the last section to use React context.

Understanding React context

React context is an object that can be accessed by components. This object can contain state values, so it provides a mechanism for sharing state across components.

A context is created using a createContext function as follows:

const SomeContext = createContext<ContextType>(defaultValue);

A default value for the context must be passed into createContext. It also has a generic type parameter for the type that represents the object created by createContext.

The context also contains a Provider component that needs to be placed above components requiring access to the context object in the component tree. A provider wrapper component can be created that stores the shared state and passes it to the context Provider component as follows:

export function SomeProvider({ children...