What is useContext, and what happens to consumers when a Context Provider value changes?

Short answer

It lets components read data directly from a Provider above them without Prop Drilling; when the Provider value changes, all consuming components automatically re-render.

Explanation

When the value prop of Context.Provider changes, every descendant component that calls useContext(MyContext) re-renders whether or not its parent is wrapped in React.memo. To avoid unrelated re-renders, split Contexts by update frequency or separate read state from update functions.

Code example

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

function DisplayMode() {
  const theme = useContext(ThemeContext);
  return <div className={`theme-${theme}`}>Selected mode: {theme}</div>;
}

Common mistakes

• Passing a new object as the Provider value without memoizing it with useMemo, re-rendering all consumers on every cycle.

Follow-up questions

• What is useReducer, and when should you choose it instead of useState?

Sources

• React docs — useContext