React Academy · Lesson

Splitting Contexts to Limit Re-renders

Separate frequently-changing values from stable ones into different contexts.

Splitting Contexts to Limit Re-renders is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will learn to split React Contexts into separate providers to minimise re-renders when only part of the context value changes.

The Re-render Problem with Context

Every component that calls useContext(MyCtx) re-renders when ANY part of the context value changes — even if the part they use did not change. A single large context can cause many unnecessary re-renders.

Splitting by Update Frequency

Separate values that change frequently from those that rarely change. Put each group in its own context. Consumers subscribe only to the context they need.

const ThemeCtx = createContext('light');
const UserCtx = createContext(null);
// theme changes rarely; user changes on login/logout — same frequency is fine
// but notifCount changes every second — split it out!

Separate Data and Dispatch Contexts

A common pattern is to split one context for state data (re-renders on every change) and another for dispatch/setter functions (stable, never re-renders consumers). Consumers of only dispatch never re-render on data changes.

const CountCtx = createContext(0);
const SetCountCtx = createContext(() => {});

function Provider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountCtx.Provider value={count}>
      <SetCountCtx.Provider value={setCount}>
        {children}
      </SetCountCtx.Provider>
    </CountCtx.Provider>
  );
}

Memoizing the Dispatch Context

Setters from useState are stable (same reference every render), so the dispatch context value does not change. But if you compute an object of actions, wrap it in useMemo.

const actions = useMemo(() => ({
  increment: () => setCount(c => c + 1),
  reset: () => setCount(0),
}), []); // stable — empty deps

Nested Providers

Nest multiple providers in the component tree. Consumers import and use only the specific context they need, keeping subscriptions narrow.

function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <NotificationsProvider>
          <Router />
        </NotificationsProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}

Profiling Before Splitting

Always profile with React DevTools before splitting contexts. Unnecessary re-renders are only a problem if they are expensive. Do not over-engineer contexts that are fast to re-render.

Context Splitting Trade-offs

More contexts means more providers in the component tree. This adds cognitive overhead. Split only when profiling shows a performance problem, not preemptively.

Combining with React.memo

Even with a single context, wrapping expensive child components in React.memo means they only re-render when their props change — not when the context changes. This can be a simpler alternative to splitting.

const ExpensiveChild = React.memo(function({ label }) {
  return <div>{label}</div>;
}); // won't re-render on context change if label hasn't changed

useReducer + Context

Pair useReducer with context to manage complex state. Store the state in one context and the dispatch function in another. Dispatch is stable; state updates on every action.

Quick Check

Why does splitting state and dispatch into separate contexts improve performance?

Recap

Split contexts by update frequency: frequently-changing state in one context, stable dispatch/setters in another. Profile first, split only when it matters, and consider React.memo as a simpler alternative.

Up Next

Next lesson: **Memoizing Context Values with useMemo** — you will wrap context value objects in useMemo so consumers do not re-render on unchanged data.

Frequently asked questions

Is the “Splitting Contexts to Limit Re-renders” lesson free?

Yes — the full text of “Splitting Contexts to Limit Re-renders” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Splitting Contexts to Limit Re-renders”?

Separate frequently-changing values from stable ones into different contexts. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Splitting Contexts to Limit Re-renders” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy