The React has released the Context API as if we need to pass data to multiple nested components. But the Context API was a bit bulky and difficult to use in class components. With the release of React hooks, the React team decided to release use context hook which is more simplified and easy to use.
What Is The Context API?
As we already know React uses State to store the data and props to pass the data between the components. This is well and good for the local state and if you want to pass the data between Parent to Child. This normal state and props will be difficult when you start to have a global state or props that need to be passed to deeply nested components.
when you pass down props through a bunch of different components so they can get to one single component far down the hierarchy actual problem starts.
This is where context API comes into the picture, With this context API you can specify certain data that will be available to all components, So there is no need to pass this data through each component to nested component. It is a semi-global state that is available anywhere inside the context.
Here there will be three things to remember
i) createContext() which is used to create the context
ii) Provider which provides the data
iii) Consumer which consumes the data which is given by the Provider
Example :
const ThemeContext = React.createContext()
function App() {
const [theme, setTheme] = useState('dark')
return (
)
}
function ChildComponent() {
return
}
class GrandChildComponent {
render() {
return (
{({ theme, setTheme }) => {
return (
<>
The theme is {theme}
</>
)
}}
)
}
}
In the above code example, we are creating a new context using React.createContext. The React.createContext gives us a variable that has two things.
The first part is a provider which provides data to all components nested inside of it. In our case the data is a single object with the theme and setTheme properties.
The second thing is the consumer. This is what you must wrap your code in to access the value of the context. This component expects a function as the child of it and that function gives you the value of the context as the only argument for the function. Then in that function you can just return the JSX that component utilizes the context.
The Above Code is a little bit difficult because it is hard to work with the context
Luckily, with the function components, we can avoid all that mess code by using the useContext hook.
In order to use context data in a functional component you no need to wrap up the data in JSX in consumer. Instead, all you need to do is pass your context to the useContext hook and it will do all the magic for you
function GrandChildComponent() {
const { theme, setTheme } = useContext(ThemeContext)
return (
<>
The theme is {theme}
<button onClick={() => setTheme('light')}>
Change To Light Theme
</button>
</>
)
}
}
Conclusion
In the end the useContext hook is very simple to use. All it does is provide a nice interface for consuming context data, but that interface is so much better than the original context consumer interface. Next time if you are working with context in your application make sure to give useContext a try.
If you want to learn React Js we strongly recommend AchieversIT
Top comments (0)