Rumors are flying! Could Context replace redux? Does it make prop drilling extinct? Even if Context !== world peace, the React team has introduced a fantastic tool to simplify one of the most difficult problems frontend developers deal with daily: state management.
Over the past six months, there has been plenty of hype about the new Context. At the end of this post, youâll know what it is, whether and when you should use it, and how to implement it in your applications.
Redux? Is that you?
What is Context?
Imagine React as a toolbox. In React 15, developers could only use prop drilling to manage their applicationâs state. (If you donât know about prop drilling yet, go read this post. Iâll wait).
Developers started reaching for other toolboxes, like redux and MobX to help with more complicated state management. They offered alternative solutions to managing state, but they introduced complexity, increased the bundle size, and required learning another library in addition to React.
Like all abstractions, these tools came burdened with tradeoffs that felt worth it for large applications, but seemed like overkill for small and mid-sized applications.
âSup. Itâs me, Context.
When Should I Use Context?
I would recommend reaching for Context when you find yourself passing props down through three or more levels in your component tree. You might notice that you have renamed your props, making it challenging to determine the dataâs origin. You might consider implementing context if a bunch of your components know about irrelevant data.
Rule of thumb: if you start to feel irritated by how long it takes to determine where data is coming from, introduce Context.
Do not hesitate to still use the other tools you have available, like prop drilling and redux. While Context can make it easier to pass props around in certain scenarios, it doesnât give you access to some of the benefits redux offers, and itâs a more complicated abstraction than prop drilling.
(If youâre interested in more of the benefits redux offers, check out Dan Abramovâs You Might Not Need Redux).
How Do I Use Context?
Now you know what Context is, and when to use it! Iâm sure youâre jumping at the bit to discover how to implement it in your applications. I created an example to show how you might replace prop drilling with Context as your application grows.
If youâre into interactivity, Iâve created a Code Sandbox you can explore! Iâll also walk you through my example step-by-step.
Prop Drilling
Iâve built an application that stores a familyâs last name in a <Grandmother /> component. The <Child /> component than displays the last name.
The gorgeous result of this application looks like this:
#stunning
We use prop drilling to pass the lastName prop from the <Grandmother /> component, through the <Mother /> component, to the <Child /> component, which displays the last name.
Context
We can refactor this example to use Context instead. Using Context means we donât need to pass the lastName through the <Mother /> component. We circumvent components that donât need to know the lastName property, and share that state only with components that need to know it.
First, we will need to create our Context.
We use createContext() and pass it an empty object as the default value:
const FamilyContext = React.createContext({});
We then create a Provider and a Consumer component and export them so they are available for consumption by other components in your application.
export const FamilyProvider = FamilyContext.Provider;export const FamilyConsumer = FamilyContext.Consumer;
Hereâs a full example of how we will use the Provider and Consumer:
Now, we have wrapped the <Mother /> component with <FamilyProvider /> because it contains <Child /> which is the component that needs access to the lastName prop.
<FamilyProvider value={this.state.lastName}><Mother /></FamilyProvider>
Notice that the Provider has a value prop. Pass in whatever state youâd like to share. In our case, we want to share the lastName so we pass in this.state.lastName.
To actually have access to the lastName, we have also wrapped the <p> tag on line 27 in the <FamilyConsumer /> component so that it has access to the context.
Letâs dig a bit deeper into <FamilyConsumer />!
At first, it might look a bit confusing if you arenât familiar with the render prop pattern, but with a bit of explanation I think you might find that itâs a fairly straightforward implementation. You donât need to know how to build a render prop to use Context, but itâs a really powerful abstraction!
Whatâs a Render Prop?
A render prop is a way of writing components in React so that they are reusable, and can take n number of children of any type. Render props appear in a couple of different disguises. Context implements a Function as a Child Pattern, which is just a render prop called children. If you want to learn more about render props, you can read When Not to Use Render Props by Kent C. Dodds or go straight to Reactâs documentation on the subject.
<FamilyConsumer /> uses a render prop to expose the context object to its children (in this case a <p /> tag but it could be anything).
Ultimately, Context is a great tool to add to your React toolbox. Use it when you find prop drilling has become too complex, but your application isnât large enough to warrant a third-party solution like MobX or redux.
đ If you liked this post, make sure to follow me on medium, follow me on twitter, and support me on Patreon**!**đ