After managing state and manipulating dom, I am now moving to maintain the context.
What is context?
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
Why context?
Imagine you are having many components in your React application with one parent and many child components at different levels, some may be directly connected some may be not. Now, consider you want to send data from parent or any other component from the tree to one of child component. This can be achieved by passing the props down to the child. This is called prop drill.
You would have to pass that data through each and every component, via their props, until you reach the desired child component.
This is not a good idea, and is prone to errors.
Here comes the React Context to save our hassle.
The React’s useContext() allows you to easily access data at different levels of the component tree, without having to pass data down through props.
Import useContext and createContext
useContext is not readily available as useState or useEffect directly. In order to use useContext you will have to create the context first.
To create context you have to import it from the ‘react’.
import { createContext } from 'react';
And to use this context in other components, you have to import useContext in that component from ‘react’.
import { useContext } from 'react';
Use it
There are multiple components in your application and you want to show logged in user on each component.
Create a user context in one of the components.
export const UserContext = createContext();
And then create a provider for this context,
return (
<UserContext.Provider value={'User is logged in'}>
<ComponentA />
<ComponentB />
</UserContext.Provider>
)
To use the context value in CompanentA and ComponentB you have to use this context and use can use the value set in the context.
const value = useContext(UserContext);
<div>The answer is {value}.</div>
So, need a detailed example on how to use this useContext?
While learning about this I created a demo app, which uses the createContext and useContext to transfer values from one component to other.
Check demo here, ReactDemoApp.
What does the application do?
It has a navigation bar which shows the count of the movies the system has. So, to pass the movies count from movies component to navigation bar I created a context in the MoviesContext component and added Provider for the same. Check code here MoviesContext.
To use this in the Nav component, I have used useContext hook there. Check code here Nav.
I have also added a add movie button to update the count. Check code here AddMovie.
This results in,
