React Context Basics

Fundamentally React context allows you to provide values to your react render tree without having to explicitly pass them as props again and again.

This is demonstrated in the below example where we use the React Context API (createContext / useContext) to provide a theme to our entire App.

ThemeContext.tsx

App.tsx

Button.tsx

import { createContext, useContext } from "react";

const ThemeContext = createContext<"light" | "dark">("dark");

export const ThemeProvider = ThemeContext.Provider;

export const useTheme = () => {
  return useContext(ThemeContext);
};

Context Override

You can provide a different value for a sub portion of your application by just using another context provider.

This is demonstrated below where some of the application is in light mode and other portions are in dark mode.

App.tsx

import styles from "./App.module.css";
import { Button } from "./Button";

import { ThemeProvider } from "./ThemeContext";

export default function AppWithTheme() {
  return (
    <ThemeProvider value={"dark"}>
      <App />
    </ThemeProvider>
  );
}

export function App() {
  return (
    <div className={styles.root}>
      <Button onClick={() => alert("alpha")}>Alpha</Button>
      <Button onClick={() => alert("beta")}>Beta</Button>
      <ThemeProvider value={"light"}>
        <Form />
      </ThemeProvider>
    </div>
  );
}

const Form = () => <Button onClick={() => alert("submit")}>Submit</Button>;

React Context Default Value

In the absence of a provider, the value we use for createContext is what is returned by the useContext hook.

Here is an example demonstrating this feature.

App.tsx

ThemeContext.tsx

Button.tsx

import styles from "./App.module.css";
import { Button } from "./Button";

/**
 * Notice that no ThemeProvider is used
 */
export default function App() {
  return (
    <div className={styles.root}>
      <Button onClick={() => alert("alpha")}>Alpha</Button>
      <Button onClick={() => alert("beta")}>Beta</Button>
      <Form />
    </div>
  );
}

const Form = () => <Button onClick={() => alert("submit")}>Submit</Button>;

React Context Consumer Component

Since hooks are only available in function components you cannot use useContext in a class component. For this purpose react provides the Context.Consumer component.

Note that you can also use this component in function components as shown below.

ThemeContext.tsx

Button.tsx

import { createContext, useContext } from "react";

const ThemeContext = createContext<"light" | "dark">("dark");

export const ThemeProvider = ThemeContext.Provider;

/** Prefer useTheme for function components */
export const useTheme = () => {
  return useContext(ThemeContext);
};

/** Export the ThemeConsumer component for class components */
export const ThemeConsumer = ThemeContext.Consumer;

However, for function components recommend using useContext as it is looks cleaner.

Recap / React Context Cheatsheet

To Create:

Create a context with createContext providing a default value
Export a custom YourValueProvider and useYourValue

To Provide:

Use YourValueProvider to override the default value

To Consume:

Use useYourValue to read the value from the component tree

ThemeContext.tsx

App.tsx

Button.tsx

import { createContext, useContext } from "react";

const ThemeContext = createContext<"light" | "dark">("dark");

export const ThemeProvider = ThemeContext.Provider;

export const useTheme = () => {
  return useContext(ThemeContext);
};

Transcript