When, why, and how to use React Context

What's a React Context?

“Context provides a way to pass data through the component tree without having to pass props down manually at every level.” — React

Without React Context …

When you need to tell a child component about a change in the state notified by the principal and root components, we pass state from one component to another until we reach the child component. We need to inform it about the change.

• The problem with this:

At some point, when we end up passing from one to another component and so on. We have a phenomenon knows as Prop Drilling. The components we used in between the component that changed the state and the one that needs to know about that doesn't use the props for themself. They are just passing it until it reaches the child component we want to inform.

Those poor components end up like a bridge that passes data through React props.

With React Context hooks …

Context's job in React is to share data or the app state across all the app components. This means that the props can be accessed from any component. Therefore, no need to pass props through other components to send it at the end to our destination component. Less code, less debugging hassle, and more code visibility.

When to use React Context

Context is designed to share data that can be considered as "global" to the whole app. An example would be the?authenticated user, a?theme, or?user preferences.

I've already used Context in the practical guide of building dark mode toggle. If you are interested in how I implemented this with React Context, here it is:

When it's good to use Context? Signs:

• You want to share data with?many?components at different nesting levels. (Like a theme, for example, when you change from white to black, all components need to switch their colors, icon, and so on)
• When the same prop (data) is passed through several components as an intermediate:

• When the state is changed by many components, in this case, it's complicated for each change to deliver the new data to other components manually. Making them connected to the same global state (one source of truth) will make the code cleaner and easy to maintain and debug.

Source

How to use React Context?

• createContext()?API

• Wrap the main component of your app inside the Context. The?Provider?keyword is essential. It tells that this is a global provider of our props and state.

The state, props data are passed in the?value?property. I could have sent only the?myTitle?prop, but I wanted to show that we can pass in strings and objects as well for multiple props.

• Accessing the shared state and props:

Notice that we used this time the?useContext()?hook to access the props. This hook needs the Context we created so far to get the shared data.

The theme example

If you have read about the dark mode article, you may have noticed that I used?MyContext.Consumer.

That's because, after each button toggle, I need to update the Context. The action is triggered by a nested component somewhere in the component tree (The ToggleDark component in the example). In this case, you can pass a function down through the Context to allow consumers to update the Context.

That passed function in the dark theme example was the?changeTheme:

If you liked this article and want me to cover other React hooks, please let me know in the comments.