React’s Context API
For the longest time, I used to hear about this Contextthing but I never got to dig into it and see what it was or what it did. The primary reason why I never bothered much is that it was discouraged to use from the official docs.
There was a quote on the docs that stated;
If you want your application to be stable, don’t use context. It is an experimental API and it is likely to break in future releases of React.
The above quote was disheartening and discouraging all together.
But all that changed when it was officially rewritten from the ground up in React 16.3 replacing the experimental API with a stable and better one.
So what is this Context and what problem does it solve?
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
The above definition from the docs is spot on and it should cause excitement to you if you have been using React, for we know how much pain it is to pass props down your components. Especially when your application is getting bigger and bigger and you have some props that are required by deeply nested child Components. Context solves this prop drilling pain that we experience when passing props down in deeply nestedComponents.
When to use Context
Since it was released, I’ve heard developers say that they can now have all their data come from a root Componentand use oneContextto pass the data down the children components as they please.
It would work for sure but tightly coupled code will be harder to refactor, extend and test not to mention, this is not React’s way of thinking and doing things. Global Context should be used for “global” application state that might be needed by most of your components. Such state could be; current authenticated user, locale preferences when you are supporting i18n and UI themes.
You should then create Context for each container component which will be solely responsible for storing and managing this specific components’ state. This container component can then pass values down its children components as props
The above method might be a bit verbose and repetitive if you have lots of components that will need a Context. You can write a HOC (Higher Order Component) which takes in a component as an argument and returns the component with some enhancements in this case, with a Provider Consumer and some values to it.
Context API
Its API consists of 3 main parts;
- React.createContext: Which is passed the initial value and an optional opt-out function that uses bitmask. This method returns an object with a Provider and a Consumer
const {Provider, Consumer} = React.createContext(defaultValue);- Provider: Which is a React component which allows Consumers to subscribe to context changes. It accepts a value prop which can be anything and holds a piece of data which is passed down to Consumers that are descendants of this particular Provider. One Provider can be connected to many Consumers and Providers can be nested to override values down the components tree.
<Provider value={/* some value */}>- Consumer: This requires a function as its child. The function takes in a value as an argument and you should return a React node which you can render something based on the accepted value argument.
The value argument will be equal to the value prop passed in the Provider component. If there was no value prop passed to the Provider, this value will be equal to the defaultValue passed to the React.createContext() method. All child Consumers are re-rendered whenever the value changes.
Demo
I will create a simple counter that has two buttons, one for incrementing and the other for decrementing the count and I will show the current count of the app.
Conclusion
When you are building an application you will surely need a way to store and manage your state. I can’t emphasize enough that state should exist and be stored as close as possible to the component(s) that need it.
Thanks for reading, cheers!
