Now let's turn our attention to learning a new React tool for sharing data called context. In this lesson we'll get a conceptual introduction to context: what it is, its common use cases, and its alternatives.
Then, in the next lesson, we'll revisit our Help Queue application and update it to use context. We'll put all of the concepts in this lesson into practice by adding a light theme and dark theme to the Help Queue, and a button to toggle between each.
Context is a mechanism that allows developers to share data in a React application. Context is an object, and we can set up as many context objects as we need. In short, context is an alternative to props, both of which allow developers to pass data down, from one component to the next. The big difference between the two is how the data is passed down:
Check out the following visualization that demonstrates the difference.
In both cases, data flows down, but the power of context comes in its ability to share data between two components without having to explicitly pass data between any intermediary components. Because of this, context helps developers avoid prop drilling when data is shared across many components.
The other notable difference between context and props is in its relation to re-rendering. You may remember these key details about props:
With context, the opposite is true:
It may be tempting to jump to the conclusion that context is a tool for "state management", however it's not true. Context is a tool for transmitting data, just like props. Neither tools change the value of their data, they just store and transmit data.
If we want the data that context holds to change over time, then we need to use context in conjunction with useState()
, useReducer()
, or a class component's state
object. We'll learn how to do this in the next lesson.
Context should only be used in two cases:
The React docs for context provides a few examples of what data could be needed on a "global" scale:
In theory, in each of the above cases many components will need the same information in order to function. To help us understand the two use cases for context, let's visualize them. Let's pretend we have an application with a component tree that looks like this:
The root component of our tree is App.js
and each component in the tree is represented by a square. Let's first visualize what an application that uses globally shared data might look like. We'll update our app's component tree to fill in components that use the global data with the color yellow:
As we can see, "global" data in a React app doesn't mean that every component uses that data, but that most or many components do. This is a great use case for React context.
The other use case for context is when multiple components that are very far apart in the component tree need access to the same data. Let's visualize what that looks like:
In the above example, the components that use the shared data are in a light purple color, and they are pretty far apart in the component tree. Using context in the above example will help us avoid lifting data (as in "lifting state up") to the nearest ancestor component (App.js
) and passing props down through many components (also called "prop drilling") to get the shared data where it needs to go.
With the use cases for context in mind, there's one final important thing to note when using context: the React docs heavily encourage developers to use context to share data only as a last resort. Why? Because it makes components harder to reuse: when a component uses context, it becomes dependent on the context and it can't be used outside of the context.
But what would we do instead of using context? These are the two alternatives:
The React docs explain the alternatives to using context on the docs, with examples. We'll also revisit this topic when we implement context in the Help Queue application.
In this lesson, we've covered the conceptual basics of context:
useState
, useReducer
, or a class component's this.state
object. In the next lesson, we'll add a button to the Help Queue to toggle between light and dark mode, and we'll use context to do it! In the process, we'll review all of the concepts we learned in this lesson.