Bootcamp
Search…
8.3.1: useContext

Learning Objectives

  1. 1.
    React context allows us to access shared state from our components without passing props
  2. 2.
    We should use context sparingly, only for state that would be painful to share through passing props
  3. 3.
    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.
Context – React
Official React guide on context
  1. 1.
    Feel free to skim through the API section on first read; the context components and functions will make more sense after reviewing the examples
  2. 2.
    Note the Dynamic Context example and how it passes this.state.theme as the initial value to ThemeContext.Provider in app.js. This means whenever this.state.theme changes in app.js, all components within ThemeContext.Provider will re-render with the new theme. The example uses a standard callback method this.toggleTheme defined in app.js to update the theme across the app.
  3. 3.
    The Updating Context from a Nested Component example stores the class method this.toggleTheme inside this.state itself, and passes this.state as the value of ThemeContext.Provider so that this.toggleTheme function is available in all components that subscribe to ThemeContext. This removes the need for us to pass this.toggleTheme via prop drilling.

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.
Hooks API Reference – React
Official React guide on useContext
  1. 1.
    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.

Exercise

Start with this live example of ThemeContext from above React docs.

Base

  1. 1.
    Add state to the App component.
  2. 2.
    Create a button that randomly selects a theme and sets it as state.
  3. 3.
    Pass this value into the Context Provider to see that the state in the child components also gets updated.
Reference Solution

Comfortable

Create a second component that holds text. (Lorem Ipsum) Add this component inside the Context Provider. import the context into this paragraph component and set the theme of the component according to the context.

Additional Resources

  1. 1.
    Web Dev Simplified provides a video explanation of useContext