React Context API

As a React application grows, passing data through several layers of components using props becomes tedious and fragile. If a top-level component needs to share a value — a logged-in user, a theme, a language preference — with a deeply nested component, every intermediate component has to accept and forward that prop even if it never uses it itself. This pattern is known as "prop drilling," and the Context API exists specifically to solve it.

Context lets you create a value at one point in the component tree and read it directly from any descendant, no matter how deeply nested, without passing it through every level in between. It is built into React itself, so no extra library is required for simple shared state.

Why it matters

Some data is needed all over an application: the signed-in user, the theme, the language. Passing it through every component in between is tedious and fragile. Context makes a value available to a whole subtree. Used for the right kind of data it removes prop drilling; used for everything it makes the application re-render too much.

Creating and Providing Context

Context is created with createContext(), which returns an object containing a Provider and a Consumer. In modern function-component code you almost always use the Provider component together with the useContext hook, and skip the Consumer render-prop pattern entirely. The Provider accepts a value prop, and every descendant component wrapped inside it can read that value.

• const ThemeContext = createContext(defaultValue); — creates the context object.
• <ThemeContext.Provider value={theme}> — makes "theme" available to all descendants.
• const theme = useContext(ThemeContext); — reads the nearest matching Provider's value from any descendant.

Avoiding Prop Drilling

Without context, a value needed five levels deep must be passed as a prop through all four intermediate components, even though only the top and bottom components actually care about it. Context removes that obligation: only the component that owns the data renders a Provider, and only the component that needs the data calls useContext. This keeps intermediate components simpler and easier to reuse, because they no longer need to know about data they don't use.

When Context Causes Unnecessary Re-renders

Every component that calls useContext(SomeContext) re-renders whenever the Provider's value prop changes, regardless of which part of that value the component actually uses. A common mistake is passing a brand-new object literal as the value on every render of the parent (e.g. value={{ user, setUser }}), which creates a new reference every time and forces every consumer to re-render even if the relevant data hasn't changed. This is fixed by memoizing the value with useMemo, and by splitting large, frequently-changing state into smaller, more focused contexts instead of one giant "app context."

• Wrap the value object in useMemo(() => ({ user, setUser }), [user]) so it only changes reference when "user" actually changes.
• Split contexts by concern (e.g. ThemeContext, AuthContext) instead of one big context, so unrelated updates don't trigger unrelated re-renders.
• For very frequent updates (like mouse position or animation frames), context is usually the wrong tool — consider local state or a dedicated state library instead.

Example

import { createContext, useContext, useMemo, useState } from 'react';

const ThemeContext = createContext(null);

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
  };

  // Memoize so consumers don't re-render on every ThemeProvider render
  const value = useMemo(() => ({ theme, toggleTheme }), [theme]);

  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return (
    <button onClick={toggleTheme}>
      Current theme: {theme} (click to toggle)
    </button>
  );
}

export default function App() {
  return (
    <ThemeProvider>
      <div>
        <h1>Context API Demo</h1>
        <ThemedButton />
      </div>
    </ThemeProvider>
  );
}

Renders a heading and a button reading "Current theme: light (click to toggle)". Clicking the button flips the theme to "dark" and back, with ThemedButton reading the value directly from context — no props were passed through App.

Exercise

Do this in src/App.jsx of a Vite + React project. Create a ThemeContext with the default value light. In App, provide the value dark to the tree. Toolbar sits in the middle and passes nothing down; ThemedButton, nested inside it, reads the theme from context and uses it as its class name.

Expected result: the button has the class dark, although Toolbar never received or passed a theme prop.

import { createContext, useContext } from "react";

// TODO: create ThemeContext with the default "light"

function ThemedButton() {
  // TODO: read the theme from context
  return <button>Save</button>;
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

export default function App() {
  // TODO: provide the value "dark" around Toolbar
  return <Toolbar />;
}

import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Save</button>;
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

export default function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

Quick quiz

Interview questions