Context and shared state

In plain English

Context lets a component share a value with a whole subtree without passing props through every level. You create a context with createContext, wrap a tree in a provider that supplies the value, and read it with useContext. A custom hook wraps the context read so components do not import the context directly. Context is the wrong tool for values that change constantly or belong to only one small branch, because it re-renders every consumer.

Step by step

1. 1Decide what single value the whole subtree needs.
2. 2Create the context with a type and a null default.
3. 3Build a provider that owns the state and passes it down.
4. 4Export a custom hook that reads the context and throws without a provider.

import { createContext, useContext, useState, type ReactNode } from 'react'

type Theme = 'light' | 'dark'

type ThemeContextValue = {
  theme: Theme
  toggle: () => void
}

const ThemeContext = createContext<ThemeContextValue | null>(null)

export function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<Theme>('light')

  function toggle() {
    setTheme((current) => (current === 'light' ? 'dark' : 'light'))
  }

  return <ThemeContext.Provider value={{ theme, toggle }}>{children}</ThemeContext.Provider>
}

export function useTheme(): ThemeContextValue {
  const value = useContext(ThemeContext)
  if (value === null) {
    throw new Error('useTheme must be used within a ThemeProvider')
  }
  return value
}

Common mistakes

• Storing rapidly changing data in Context causes every consumer to re-render on each change.
• Exporting the raw context object lets consumers read it without a provider and get a confusing null.
• Using Context for a value a single component could own locally adds indirection with no benefit.
• Putting unrelated values into one context means the whole tree re-renders whenever any of them changes.