React Academy · Lesson

When Not to Use Context

Recognize cases where prop passing, composition, or a state manager is a better fit.

When Not to Use Context is a free React Academy lesson on CoddyKit — lesson 4 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 when React Context is the wrong tool and recognise situations where prop passing, composition, or a state manager is a better and simpler fit.

Context Is Not a Silver Bullet

Context is often over-used. Developers reach for it to avoid any prop passing, but this creates hidden dependencies, makes components harder to test, and can hurt performance.

When Props Are Better

If a value is used by 1–3 closely nested components, prop passing is simpler, more explicit, and easier to trace. Context adds provider boilerplate and hides data flow.

// Don't need Context for this
function Page() {
  const [color, setColor] = useState('blue');
  return <Header color={color} />; // simple, clear
}

When Composition Is Better

If you need to avoid drilling through 3+ levels, try composition first: pass the fully-rendered consumer as a prop. No context needed and the data flow is still explicit.

Context Causes Hidden Coupling

A component that calls useContext(UserCtx) cannot be reused without wrapping it in a UserProvider. Props make dependencies explicit — you can see exactly what a component needs from its signature.

High-Frequency Updates

Do not use Context for values that change many times per second (e.g. mouse position, animation progress). Every change re-renders all consumers. Use refs, external stores, or a signal-based library instead.

Context Is Not a State Manager

Context only distributes values — it has no built-in caching, devtools, or middleware. For complex shared state with frequent updates, use Zustand, Redux, or Jotai which are built for this purpose.

Server State Does Not Belong in Context

Data fetched from a server (user list, posts) does not belong in Context. React Query, SWR, or RTK Query manage server state with caching, background refetching, and error states — Context manages none of these.

Form State Does Not Belong in Context

Managing form fields in Context causes every keystroke to re-render all context consumers. Use local component state or a form library like React Hook Form instead.

When Context IS the Right Tool

Context is ideal for: current user/auth state, theme (light/dark), locale/i18n, and other stable cross-cutting values that many components read but rarely change.

Quick Check

Which type of data is LEAST appropriate to store in React Context?

Recap

Use Context for stable, cross-cutting values like auth, theme, and locale. Prefer props for 1–3 levels of passing. Prefer composition to avoid drilling. Use React Query for server state, and Zustand/Redux for complex shared state.

Course Complete

Congratulations! You finished **React Context Patterns & Performance**. You now know how to split contexts, memoize values, apply selectors, and — equally importantly — when not to use Context at all.

Frequently asked questions

Is the “When Not to Use Context” lesson free?

Yes — the full text of “When Not to Use Context” 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 “When Not to Use Context”?

Recognize cases where prop passing, composition, or a state manager is a better fit. 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 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “When Not to Use Context” 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