Working with React Context API
Need to use Context?
In React the data is passed from parent to its child through the props. What if we want to access data to the nth-child of the root parent? One solution is to pass the data as props from each component whether or not the data is used in each component. But there is another way by which we can directly access the prop that is being passed from the root component. Consider an example, We want to reach our destination from one place to another via bus. And in between our destination, we need to change the buses for five different bus stations. What if we want to reach our destination in one go without changing the buses. Similarly, we want to use the data to nth-child without being passed from each parent component. Therefore, the Context concept comes into the picture.
Earlier it is used to be the experimental feature of React, with the release of a new version of React, it is stable now and being used widely.
What is Context?
As stated in the React docs:
‘Context provides a way to pass data through the component tree without having to pass props down manually at every level.’
Context is just another way of passing data to the components at different levels. The state can be used to any level whenever there is need of it and there is no need to pass the data as props at each step. It is useful when the nested level is more than three.
Though we can use state management library to use the data at any component level. But to keep the app simple without learning the whole new library and also not to increase the complexity and size, React has provided the Context concept.
How to use?
There are some API’s that need to be learned first before moving to an example. Those are:
- React.createContext :
const ContextExample = React.createContext(value)
This API creates the object which is having some default value defined by us. This is up to us whether we would have a default value or not. It provides the two methods that we need to set the value and use the value as defined below.
2. Context.Provider
<ContextExample.Provider value={}>
Provider method allows setting the value that can be used in components.
3.Context.Consumer
<ContextExample.Consumer> {value} </ ContextExample.Consumer>
This allows using the value at any component, whichever component subscribes to it. It uses the concept of Render Props of React. If we do know about this, then it’s easy to grasp.
4.Example
Consider an example where we want to pass the state data from the app.js that is root component and pass down to the component2.js that is the child of component1.js and component1.js is a child of app.js.
Firstly created the context.js file in which we get the object using the createContext and stored in HelloContext.
Then we used HelloContext.Provider in app.js as we will be setting the value from the state. Also, we are passing into the Component1.
Now in Component1.js we will be just calling Component2.
Now finally we are going to use the state value by using HelloContext.Consumer in Component2 and here we use the message value that is passed from the app.js
The resulting output can be seen on the web browser.
Well, that’s all, I hope I have provided a basic understanding of React Context. In the next blog, I will show how to use it with React hooks, that would be more interesting. Stay tuned.
❤️ Like, Share or Leave A Comment!
If you enjoyed this post, don’t forget to give it a 👏🏼, share it with a friend you think might benefit from it and leave a comment! Stay tuned for more exciting blogs on Flutter, Elixir, React, Angular, Ruby, etc.
Thanks !!
