React Context For Dummies

Why context matters

React’s Context API is a great way to pass state around to components at different levels of your React application without the need for state management tools, such as Redux, Zustand, or others.

Does my React app really need Context?

React’s context API is usually used when data needs to be accessed by many components at different nesting levels, according to the docs 📃📄.

But if you only want to avoid the prop drilling of multiple props through many levels of components, you can often use component composition as a simpler alternative to context.💡

Component Composition

For example, if you have a Page component that passes user and avatarSize props down through many levels so the bottom two components, Link and Avatar, can have access to them, you can instead pass down the Link and Avatar components themselves as one packaged piece of code so that the intermediate components don’t need to know about the user and avatarSize props, as follows:

const userLink = (
<Link href={user.permalink}>
<Avatar user={user} size={props.avatarSize} />
</Link>
);

Now userLink can be passed down many levels of components using one single prop, userLink, that has all of the rest of the info (the Link component, Avatar component, user info, and avatarSize) encapsulated inside of it. 🧐😃

If you actually do have many components at different nesting levels that need to access the same state, then React Context may be for you. Is it simple, you ask? I’d say it is relatively simple, yes.

How To Use React’s Context API

All you need to do to create and use a context is:

1. Create a directory near your components directory called contexts and inside of it:
2. Create a new file called MyContext.js
3. Import { createContext } from ‘react’
4. Create a context, like so:export const MyContext = createContext(defaultValue);
5. Find the parent component that has access to the state this context will use and renders all the components that will use this context, and in that file:
6. Import { MyContext } from ‘../contexts/MyContext’
7. Wrap the children components that need access to this context inside of MyContext’s Provider component and give the provider a values prop containing an object with the state values that you want your context to contain, like so:
8. <MyContext.Provider values={{ userName, setUserName }}> {userInfoReady ? <UserProfile /> : <defaultProfile />}</MyContext.Provider>
9. Go to the UserProfile component file
10. Import two things here: 1) import { useContext } from ‘react’, and 2) import { MyContext } from ‘../../contexts/MyContext’;
11. From here, your UserProfile component can access any piece of state in MyContext, like so:
12. const { userName, setUserName } = useContext(MyContext);

Congratulations, you just created a context and used its provider to pass state through your application. You can now import this state (context) throughout your app and access it at different levels, without having to prop drill! 🎉 🥳 🎊

Want to dive into React Context in even more depth? Check out the docs here: https://reactjs.org/docs/context.html.

P.s. — Did you enjoy this article or find it helpful in any way? Consider giving me 5 (or 50) claps!

About The Author

Jason Wiesner is a 33-year-old Front End Developer at DisneyStreaming / Hulu. He has been a professional software engineer since 2020 and has worked on other projects for top companies like AAA and more.

Portfolio: https://jason-wiesner.herokuapp.com

LinkedIn: https://linkedin.com/in/wiesnerjason

Github: https://github.com/jasonwiesner