React: How to Use Context with Functional Components
When it gets too complicated to share the state between all React components that need it, Context comes to the rescue. Here’s a short guide on how to use context with functional components and hooks in React.
When shoud you use React Context
React’s Context is a solution for use cases where you need to share state between multiple components. Without Context, all components that want to use the same state would have to have a common parent component that would pass the state down through props.
This is fine if there are few components that need to use the same state and they all have a common parent which can store it. But once you have too many components that need the same state and/or they are too far apart in the React component tree, passing the state down through props becomes a nightmare. It’s tedious to write, complicated to understand and difficult to maintain.
If you encounter this issue, consider replacing your state with React Context instead.
It’s pretty simple to set up a Context once you get a hang of it. However, it’s also easy to forget how to do it since you generally need very few (or perhaps only one) Context in your React app. I had to re-learn how to do it, so I thought I could help both myself and others by writing the process down.
Context works in a similar way to React state, but it isn’t necessarily bound to a concrete component. Instead, all components that need to access the information stored in the context can simply call the useContext hook of the desired Context.
If the Context isn’t bound to a particular component, it’s typically stored in a separate module (file). For easier navigation, you can group all such React Context instances in a common folder, separate from your React components.
First, we’ll take a look at defining the Context and then we’ll go though where to place it and how to use it in your components.
Defining a Context
Similarly to state, Context is created using a createContext function. The function takes the initial value of the Context as a parameter and returns the Context created.
Notice that, unlike state, context doesn’t have a setContext function that would allow you to change the value of the Context. Instead, each Context uses a Provider component that receives a value. This value is set as the value of the Context and can be accessed by all the children components.
Finally, to enable your components to consume the contents of the context, you also need to create a useContext hook. This hook can be used by the components that need to access the Context’s value.
Here’s an example of a simple Context that provides the information about whether it’s currently daytime:
The Context Provider can have far more complex ways of determining the value to be passed down to its children. The Context Provider itself can have a state and the value of the Provider’s state can then be passed down through the Context.
Note that you need to export the Context Provider and the useContext hook you created. The next section will cover more on how to utilise them in your React app.
Using the Context
All components that need access to the Context should be rendered as children of the Context Provider. The Provider will then provide the value that its children can access.
So the first thing you need to do is identify the parent component that contains all the components which need to use the Context and render the Provider there.
Since the Context will generally hold the information that’s needed in many components, it’s common to render the Provider within the top level App component. Here’s an example:
Finally, the value from the Context can be accessed through the useContext hook.
The Context in this example only contains one boolean value, but Context isn’t limited to simple values and can contain complex objects, just like state.
And that’s all you need to get your Context up and running in React! You can look for more information on this topic in the official documentation.
I hope this will help you get started with React Context. Thank you for reading!
Cheat Sheet
Here’s a short summary on how to get a working React Context.
To set up your Context:
- create a Context using React.createContext()
- create a Context Provider that renders the context
- create a React.useContext hook
To use your context:
- render the Context Provider in the parent component (commonly the top-level App component)
- use the useContext hook to get the value from the Context in your components
