Full Stack Web Development

10.7    The Context API

Think of the React context, in a broad sense, as a global variable. The context is a structure that can be integrated into the component tree via a provider. All subcomponents can then access the context’s information without the information being explicitly passed to them as a prop. Many popular React libraries such as Redux, a solution for centralized state management, or React Router also rely on the context API.

In our example, by using the context API, we decouple the List and Form components and store the contacts in the context. For this purpose, the first step is to create the context. You can do this using the createContext function. Typically, you define a context in a separate file so that you can access it ...