2.2.5: Context
Learning Objectives
React context allows us to access shared state from our components without passing props
We should use context sparingly, only for state that would be painful to share through passing props
How to use
useContext
to simplify syntax when using context with functional components
Introduction
React context allows us to share state across our app without passing it as props. This is helpful for apps with many levels of component nesting when we would need to use the same state across multiple components and pass state as props through many levels of components (aka "prop drilling"). The React team recommends we use context sparingly because it makes component reuse more difficult.
"Context is designed to share data that can be considered โglobalโ for a tree of React components, such as the current authenticated user, theme, or preferred language." - React official docs on context
"...sometimes the same data needs to be accessible by many components in the tree, and at different nesting levels. Context lets you โbroadcastโ such data, and changes to it, to all components below. Common examples where using context might be simpler than the alternatives include managing the current locale, theme, or a data cache." - React official docs on context
Please read the following official React guide on context.
Feel free to skim through the API section on first read; the context components and functions will make more sense after reviewing the examples
Note the Dynamic Context example and how it passes
this.state.theme
as the initial value toThemeContext.Provider
inapp.js
. This means wheneverthis.state.theme
changes inapp.js
, all components withinThemeContext.Provider
will re-render with the new theme. The example uses a standard callback methodthis.toggleTheme
defined inapp.js
to update the theme across the app.The Updating Context from a Nested Component example stores the class method
this.toggleTheme
insidethis.state
itself, and passesthis.state
as the value ofThemeContext.Provider
so thatthis.toggleTheme
function is available in all components that subscribe toThemeContext
. This removes the need for us to passthis.toggleTheme
via prop drilling.
useContext
useContext
useContext
is a React Hook that allows us to retrieve the latest value of the context object passed to it. It replaces context features Class.contextType
and Context.Consumer
from the context guide above, and can simplify our code when using functional components. Rocket recommends using useContext
for context when using functional components.
Please read the following official React guide on useContext
.
Besides providing simpler syntax for reading context,
useContext
does not change the use cases for context. The examples from the official guide on context still apply, albeit with different syntax.
Sample Implementation
Please checkout the finished code in this repository, ensure that you're on the react_context
branch if you want to test out the application on your machine you will need to install the dependencies with the command npm install
after the installation you can then run the application with the command npm start
.
Last updated