There are different ways by which data can be shared between multiple components kept at different level in ReactJS.Below are the common ways by which data can be shared :
- Using props
- Using Redux
- Using Context API
Redux is one of the most popular way which accomplish this task. But apart from Redux we also have Context API which can do the same task for us is little bit easy manner.
Context API provides the way to pass data from parent component to deep nested child component without passing the data at each level of component. In the small level of application data is communicated between parent to child using props, Which is not suitable if we are working with huge application and dealing with a large number of Components.
React Context API
This is used to provide state across entire , or some part of the application.We will discuss futher this is achieved using createCotext function to define the context. A provider component is mainly a component which wraps the component tree which will access the context value. After Passing the value from the top level the next task is to consume the context at the required nested component. Then either a Consumer component, Context class member or useContext is used to access the state value.
1. Creating a Context
While working with Context API, At the begining we need to create the context using below syntax:
const PostContext = React.createContext(defaultValue);
Above command create a Context object. Above function takes a parameter which is the default implementation and returns an object containing Provider and Consumer members that can be used to provide context to components and access that context from any nested level component. Whenever React renders the component that subscribe the Context object, Closest mathing provider in the tree will be read.
2. Providing Context
After creating the Context object, next part is to provide that context, Syntax is:
<PostContext.Provider value={/* some value */}>
Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes. It mainly accepts the value prop to be passed to the consuming components that are the descendants of this Provider. One Provider can be connected to the many consumers. Providers can be nested to override the values deeper within a tree. As we have overridden the default value of the className and we get the latest value of the className in the component tree.
3. Consuming Context
`
{value => /* render something based on the context value */}
`
This is the component which consumes the context value. It receives the latest context value and returns the React node. The value argument passed to a function will be equal to a value prop of the closest Provider for this context above in the tree. If there are no Providers for the context above, the value argument will be equal to the defaultValue that was passed to createContext().
Conclusion
Context is very easy to use in comparison to Redux library. I hope you understand all about the Context API.
That’s all for now. Thank you for reading and I hope this post will be very helpful to start work with React Context API.
Let me know your thoughts over email pankaj.itdeveloper@gmail.com. I would love to hear them and If you like this article, share it with your friends.
Thank You!
Click here to find more with sample application.
Top comments (0)