React Context Performance

Understand that every context consumer re-renders when any value in the context changes.

const AppContext = createContext<{ user: User | null; theme: string } | undefined>(undefined);

function AppProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [theme, setTheme] = useState("light");

  // All consumers re-render if EITHER user or theme changes
  return (
    <AppContext.Provider value={{ user, theme, setUser, setTheme }}>
      {children}
    </AppContext.Provider>
  );
}

Recognize that inline object literals create a new reference on every render, triggering all consumers.

// Bad: new object on every parent render — all consumers re-render unnecessarily
<MyContext.Provider value={{ user, setUser }}>
  {children}
</MyContext.Provider>

// Good: stable reference when user hasn't changed
const value = useMemo(() => ({ user, setUser }), [user]);
<MyContext.Provider value={value}>{children}</MyContext.Provider>

Profile with React DevTools before optimizing to confirm which components actually re-render.

// Open React DevTools > Profiler tab
// Record an interaction, then inspect the flame chart
// Only optimize components that show unnecessary renders

Spot the problem by logging renders inside a context consumer.

function ThemeButton() {
  const { theme } = useContext(AppContext)!;
  console.log("ThemeButton rendered"); // fires on every user change too
  return <button className={theme}>Click me</button>;
}

Understand that splitting contexts into smaller pieces is the primary fix for this problem.

// Instead of one big AppContext, use focused per-domain contexts:
// UserContext → only user data
// ThemeContext → only theme data
// Each consumer subscribes only to what it needs

Wrap the context value object in useMemo so a new reference is only created when dependencies change.

function UserProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const userValue = useMemo(
    () => ({ user, setUser }),
    [user] // only creates a new object when user changes
  );

  return (
    <UserContext.Provider value={userValue}>
      {children}
    </UserContext.Provider>
  );
}

List every value used from the context object in the dependency array to avoid stale closures.

const value = useMemo(
  () => ({ user, settings, updateUser }),
  [user, settings, updateUser] // include all three dependencies
);

Combine useMemo with stable function references so functions don't invalidate the memo.

const updateUser = useCallback((newUser: User) => {
  setUser(newUser);
}, []); // stable reference — empty deps because setUser is always stable

const value = useMemo(() => ({ user, updateUser }), [user, updateUser]);

Verify that memoization is working by checking that consumers don't re-render on unrelated parent renders.

// Parent re-renders due to its own state, but context value stays the same
// Consumers should NOT re-render — confirm in React DevTools Profiler
function ParentWithOwnState() {
  const [tick, setTick] = useState(0); // this state is unrelated to context
  return <button onClick={() => setTick(t => t + 1)}>Tick: {tick}</button>;
}

Avoid memoizing the initial value inline — always use useMemo inside the provider component.

// Wrong: initial value object is only created once but is a constant, not reactive
<MyContext.Provider value={{ user: null, setUser: () => {} }}>

// Right: useMemo inside the provider component reacts to state changes
const value = useMemo(() => ({ user, setUser }), [user]);
<MyContext.Provider value={value}>

Wrap context callbacks in useCallback so their references stay stable across parent renders.

function UserProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const updateUser = useCallback((newUser: User) => {
    setUser(newUser); // setUser is stable, so deps array is empty
  }, []);

  const value = useMemo(() => ({ user, updateUser }), [user, updateUser]);

  return (
    <UserContext.Provider value={value}>{children}</UserContext.Provider>
  );
}

Understand that functions created inline on every render invalidate the memoized context object.

// Bad: inline function creates new reference every render
const value = useMemo(() => ({
  user,
  updateUser: (u: User) => setUser(u), // new reference each render
}), [user]); // updateUser changes every render, memo is useless

// Good: useCallback gives updateUser a stable reference
const updateUser = useCallback((u: User) => setUser(u), []);
const value = useMemo(() => ({ user, updateUser }), [user, updateUser]);

Use useReducer dispatch instead of multiple callbacks — dispatch is always stable, no useCallback needed.

const [state, dispatch] = useReducer(userReducer, initialState);

// dispatch never changes reference — safe to include in memoized context value
const value = useMemo(() => ({ state, dispatch }), [state]);

Compose multiple stable callbacks into a single memoized actions object for cleaner context values.

const actions = useMemo(() => ({
  login: (credentials: Credentials) => dispatch({ type: "LOGIN", payload: credentials }),
  logout: () => dispatch({ type: "LOGOUT" }),
  updateProfile: (data: Partial<User>) => dispatch({ type: "UPDATE", payload: data }),
}), [dispatch]); // dispatch is stable, so actions object is stable

Prefer useReducer over useState in context providers to eliminate most useCallback needs.

// useState approach: need useCallback for every mutator
const [user, setUser] = useState(null);
const updateName = useCallback((name) => setUser(u => ({ ...u!, name })), []);

// useReducer approach: dispatch is always stable — no useCallback needed
const [state, dispatch] = useReducer(reducer, { user: null });