React context in client components in NextJS - Performance & Optimization

Performance: React context in client components

MEDIUM IMPACT

This affects interaction responsiveness and rendering speed by controlling how often components re-render when context changes.

Sharing global state with React context in client components

NextJS

const UserContext = React.createContext(null);
const ThemeContext = React.createContext(null);

function App() {
  const [user, setUser] = React.useState({ name: 'Alice' });
  const [theme, setTheme] = React.useState('light');

  return (
    <UserContext.Provider value={user}>
      <ThemeContext.Provider value={theme}>
        <UserProfile />
        <ThemeSwitcher />
      </ThemeContext.Provider>
    </UserContext.Provider>
  );
}

function UserProfile() {
  const user = React.useContext(UserContext);
  return <div>{user.name}</div>;
}

function ThemeSwitcher() {
  const theme = React.useContext(ThemeContext);
  return <button>{theme}</button>;
}

Splitting context reduces unnecessary re-renders by isolating updates to only components that consume the changed context.

📈 Performance GainReduces re-renders by up to 50% in this example, improving INP and CPU efficiency.

Sharing global state with React context in client components

NextJS

const MyContext = React.createContext({ user: {}, theme: 'light' });

function App() {
  const [user, setUser] = React.useState({ name: 'Alice' });
  const [theme, setTheme] = React.useState('light');

  return (
    <MyContext.Provider value={{ user, theme }}>
      <UserProfile />
      <ThemeSwitcher />
    </MyContext.Provider>
  );
}

function UserProfile() {
  const { user } = React.useContext(MyContext);
  return <div>{user.name}</div>;
}

function ThemeSwitcher() {
  const { theme } = React.useContext(MyContext);
  return <button>{theme}</button>;
}

Updating either user or theme causes all consumers to re-render, even if they only use one part of the context.

📉 Performance CostTriggers re-render of all consuming components on any context value change, increasing INP and CPU usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Single large context for multiple states	Many components re-render unnecessarily	Multiple reflows triggered	Higher paint cost due to frequent updates	[X] Bad
Multiple small contexts for separate states	Only relevant components re-render	Fewer reflows triggered	Lower paint cost with targeted updates	[OK] Good

Rendering Pipeline

When context value changes, React schedules re-render for all components consuming that context. This triggers React's reconciliation and commit phases, causing DOM updates if output changes.

→Reconciliation

→Commit

→Paint

⚠️ BottleneckReconciliation stage is most expensive due to re-rendering all consumers on any context change.

Core Web Vital Affected

INP

This affects interaction responsiveness and rendering speed by controlling how often components re-render when context changes.

Optimization Tips

1Split React context into smaller, focused contexts to limit re-renders.

2Memoize context values to avoid triggering updates when values are unchanged.

3Use React DevTools Profiler to detect unnecessary re-renders caused by context.

Performance Quiz - 3 Questions

What is a common performance issue when using a single React context for multiple unrelated states?

A Only components using changed values re-render

B Context values are cached automatically

C All consuming components re-render on any context change

D Context updates do not trigger re-renders

DevTools: React DevTools Profiler

How to check: Record a profiling session while interacting with context updates. Look for components that re-render on unrelated context changes.

What to look for: High number of re-renders in components that do not use the changed context value indicates poor context splitting.