Context best practices in React - Performance & Optimization

Performance: Context best practices

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

React

const CountContext = React.createContext(0);
const UserContext = React.createContext({ name: '', age: 0 });
const ThemeContext = React.createContext('light');

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

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

Splitting context into smaller, focused providers limits re-renders to only components that consume the changed context value.

📈 Performance GainReduces unnecessary re-renders, improving INP and reducing CPU usage.

Sharing global state with React Context

React

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

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

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

Passing an object with multiple state values causes all consumers to re-render whenever any part changes, even if they only use one value.

📉 Performance CostTriggers re-renders for all consumers on any state update, increasing INP and CPU usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Single large context with multiple values	Many components re-render unnecessarily	Multiple reflows if DOM changes	Higher paint cost due to frequent updates	[X] Bad
Multiple small contexts with focused values	Only relevant components re-render	Fewer reflows	Lower paint cost	[OK] Good
Passing inline functions in context	Triggers re-renders every render	Multiple reflows	Higher paint cost	[X] Bad
Memoized functions in context	Stable context value prevents re-renders	Minimal reflows	Lower paint cost	[OK] Good

Rendering Pipeline

When context value changes, React schedules re-renders for all components consuming that context. This triggers React's render phase, then the browser's layout and paint phases if DOM changes occur.

→React Render Phase

→Layout

→Paint

⚠️ BottleneckReact Render Phase due to unnecessary re-renders caused by broad or frequently changing context values.

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 context into smaller, focused providers to limit re-renders.

2Memoize functions and objects passed in context to keep values stable.

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

Performance Quiz - 3 Questions

What is a main performance problem when passing a large object with multiple values in a single React context?

A All consuming components re-render on any value change

B The context value is cached and never updates

C It reduces bundle size significantly

D It prevents components from rendering

DevTools: React DevTools Profiler

How to check: Open React DevTools, go to Profiler tab, record while interacting with your app, then inspect which components re-render and how often.

What to look for: Look for unnecessary re-renders of components that consume context but whose relevant data did not change.