Context in React is a powerful feature that enables data sharing between components without the need for explicit prop passing at every level of the component tree. Using Context, we can propagate data down the component hierarchy, making it easily accessible to any component, regardless of its position in the tree.

Note

To get started, let's delve into the syntax. We'll provide a step-by-step guide, ensuring that you grasp each concept along the way. Applying context demands specific code implementation at various component levels. Once we thoroughly cover the syntax, we'll dive into practical example.

Syntax:

1st step: We create a new Context using createContext() function from the React library and assign it to a variable. We should do it at the top level of the application. Typically, we do it in a separate file (e.g., context.js). It will be responsible for the Context object.

context.js

js

2nd step: In the App file, we wrap all the components that need access to the shared data with the Provider component from the created Context. The Provider component allows us to define the value of the context and make it available to all the child components that consume that context.

App.jsx

jsx

3rd step: In the App file, we must also provide the context data. We achieve this by using the value prop for the Context.Provider component. We assign all the data required to the value prop.

App.jsx

jsx

4th step: In the child components (ChildCompOne or ChildCompTwo), we can access the shared data using the useContext hook. To use the useContext hook, we must pass the created Context from the context.js file as its argument.

ChildCompOne.jsx

jsx

Full app code:

Note

Please take a moment to review each step, opening each file and folder, to ensure you clearly understand the process. The next chapter will proceed with an example combining Context and hooks. This will allow you to see how these concepts work together in practice.