What is Context?
A Context is basically a JavaScript object that can be passed from one parent component to several child components efficiently. Props can pass values to components as well. But, if a value needs to be passed to a child component deep in the component tree, using props means the value also passes through components that do not need it. Or, if a value is required by several components, props can make it difficult.
This is a good use case for Context. Props need to be passed from one component to the other. With Context, the parent component provides the value, and the child components that need it can access it.
Passing values with Context and Hooks
Let's take a common example used for demonstrating Context - themes. Consider the following UI:
Here, the one with the red border is the main App.js
component. The one with the green border is a component called ThemeButton.js
, and the one with a blue border is the ThemeWindow.js
component. The App
component will have the other two as its child components. Clicking the button in ThemeButton
will toggle the theme between light and dark. The result of the theme will be reflected in ThemeWindow
.
We need to create a context first, then have the App
component provide a value for its child components. The child component(s) will consume this provided value. Let's set this up.
1. Creating a context
A context can be created in a separate file or in the App
component itself, but it is generally better to create a separate file for it. Since depending on your app, you may need multiple contexts for different features. It can thus be useful to have separate files.
Create a new file to hold the context and export it:
In this file, we export two things - an object containing theme values and our context. The createContext()
function returns a Context object. It accepts an argument for the initial value similar to the useState
hook. In this case, the light themes object is the default value of ThemeContext
.
2. Passing values with the Provider component
Since the context has been created, let's add it in App.js
.
Every Context object (created with React.createContext()
) has a Provider component. This Provider component should be wrapped around all the child components that will be getting access to ThemeContext
. Conversely, there is also a Consumer component. You can also use the useContext
hook instead if you're not working with class-based components.
You must be wondering why the light object was used as the default value, but the Provider component has passed the dark object. First of all, the value
prop used in the Provider component is something React recognizes so you cannot use a different name for that prop.
Whatever is passed through the value
prop is what the child components consume. And if a component attempts to access ThemeContext
but does not have a Provider component in the tree above, it will use the default value the Context object has (the light theme).
As a quick example, let's say there was a third component called ThemeFont.js
. But this third component was not included within the Provider component -
Since ThemeFont
is not wrapped by the Provider component, it will not receive the new value. Although it can still access ThemeContext
, it will receive the default value, that is, the value we passed to createContext
- the light themes object.
Not wrapping a component that needs access to a Context in a Provider component still gives it access to the Context's default value.
Although you probably wouldn't have a reason to do this, it is still good to know.
3. Consuming context in child components
Let's use React Hooks to consume the provided context value.
Running this app, you would get the following result:
The ThemeWindow
certainly has the dark theme. But, the button to toggle the theme doesn't work. The next article will demonstrate how to update values passed via Context.
Top comments (0)