This article assumes you have a basic understanding of the React.js framework.
Context is the React solution for creating global data. This makes it consumable from any component, no matter how deep it is.
The basic example of using Context. Assume you need to use the
theme state. And it's defined in the
App component, from the
GreatGrandChild component. To do that, you'll pass the state through each component in the components tree until you reach the
Context saves you that burden of prop drilling states and methods. Create a separate context file holding the state and its methods.
Creating a Context has 3 steps: creating, providing, and consuming. To create a Context create a file under the src directory of the project. It'll be named after the context's name such as
themeContext.js. Then use
createContext API which creates the Context object. Finally, export the context object.
In src/themeContext.js file
Each context object has a
Provider component. The
Provider component is used to provide the context to any of its children components. A
Provider component has a
value object prop which holds the context value and the updater method.
Think of the Provider component as the house of the context. The components inside that house have access to it, so they can consume it and listen to its updates. So, whenever there is a change, all the consumer components are re-rendered.
To make things easier, create the
Provider component inside the context file.
In src/themeContext.js file
Now that we have the
Provider component, let's use it for providing the context. Import the
ThemeContextProvider component from inside App.js. Then, pass the children components to it.
You have to tell React which component is dependent on the context. So that not every component is re-rendered on changes.
Note: There can be more than one provider in the components tree. The consumer components match the value of the nearest parent provider. If there are no providers above the consumer, it will receive the default value from the context file.
To consume the context object from a class-based component, assign the context object to a static
contextType and you're good to go. This way you can destructure the
theme value and its updater from anywhere inside a component class.
Another way to consume a context from class-based components is to use the
themeContext.Consumer component but it's more of a legacy way. The trade-off here is that you can't use the Context value anywhere but inside the render method. On contrary,
contextType allows you to use the context in any lifecycle method besides the render method.
It's not very different. We'll use React hook
useContext. It does the same job as static
Using context is easy and helpful. It could be what you're looking for, but be careful not to miss use it.
That's it. I hope I clarified things enough. Feel free to write your thoughts in the comment section below.