Creating context in React - Performance Optimization Steps

Performance: Creating context

MEDIUM IMPACT

This affects interaction responsiveness and rendering speed by controlling how components share data without prop drilling.

Sharing state across many components without prop drilling

React

const CountContext = React.createContext();

function App() {
  const [count, setCount] = React.useState(0);
  const value = React.useMemo(() => ({ count, setCount }), [count, setCount]);
  return (
    <CountContext.Provider value={value}>
      <ComponentA />
      <ComponentB />
      <ComponentC />
    </CountContext.Provider>
  );
}

// Components only re-render when count changes, memoized value prevents unnecessary renders

Memoizing context value prevents unnecessary re-renders by providing stable references unless actual data changes.

📈 Performance GainReduces re-renders, improving INP and CPU usage during interactions.

Sharing state across many components without prop drilling

React

const MyContext = React.createContext();

function App() {
  const [count, setCount] = React.useState(0);
  return (
    <MyContext.Provider value={{ count, setCount }}>
      <ComponentA />
      <ComponentB />
      <ComponentC />
    </MyContext.Provider>
  );
}

// ComponentA, B, C all consume context and re-render on count change

Passing a new object as context value on every render causes all consuming components to re-render even if they don't use all parts of the context.

📉 Performance CostTriggers re-render of all consuming components on every state change, increasing INP and CPU usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Context value recreated every render	Many components re-render	Multiple reflows if DOM changes	High paint cost due to many updates	[X] Bad
Memoized context value with useMemo	Only components using changed data re-render	Minimal reflows	Lower paint cost	[OK] Good

Rendering Pipeline

When context value changes, React schedules re-renders for all components consuming that context. This affects the React reconciliation and commit phases, impacting interaction responsiveness.

→React Reconciliation

→Commit Phase

→Paint

⚠️ BottleneckReact Reconciliation due to many components re-rendering from context value changes

Core Web Vital Affected

INP

This affects interaction responsiveness and rendering speed by controlling how components share data without prop drilling.

Optimization Tips

1Memoize context values to avoid unnecessary re-renders.

2Split context into smaller contexts to limit re-render scope.

3Avoid passing new object or function references as context value on every render.

Performance Quiz - 3 Questions

What happens if you pass a new object as context value on every render?

A Only components using changed data re-render

B No components re-render

C All consuming components re-render even if data didn't change

D Context value is ignored

DevTools: React DevTools Profiler

How to check: Record a profiling session while interacting with components consuming context. Look for frequent re-renders of many components when context updates.

What to look for: High number of re-renders and long commit times indicate inefficient context usage.