Lesson 20 of 80

Strict Mode & Double Invocation

Q: Why does React double-invoke component renders and effects in development under StrictMode, and how should you respond when it surfaces a bug?

A strong answer covers: StrictMode double-invokes to verify render purity and that effect cleanup genuinely undoes setup, simulating remove-and-re-add; This is development-only; production builds run everything once; The correct response to a surfaced bug (e.g. duplicate fetch) is to fix the underlying impurity/missing cleanup, not to disable StrictMode.

In development, React deliberately calls some functions twice — not a bug, a stress test designed to surface the exact impurity bugs that would otherwise hide until production.

11 min read

Check your understanding

Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.

Question 1 of 2

A useEffect with no cleanup fires a fetch twice in development under StrictMode. What is StrictMode actually revealing?

That the effect isn't resilient to being re-run without proper cleanup — a real gap, not a false alarmThat the component is using too many hooksA bug in React itself that will be fixed in a future version

Stuck? Ask the AI tutor

Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.

Interview questions on Strict Mode & Double Invocation

What interviewers actually ask about this, and what a strong answer has to cover.

Why does React double-invoke component renders and effects in development under StrictMode, and how should you respond when it surfaces a bug?

A strong answer covers

StrictMode double-invokes to verify render purity and that effect cleanup genuinely undoes setup, simulating remove-and-re-add
This is development-only; production builds run everything once
The correct response to a surfaced bug (e.g. duplicate fetch) is to fix the underlying impurity/missing cleanup, not to disable StrictMode

Likely follow-ups

How would you fix a data-fetching effect that fires twice under StrictMode?
How does this connect to React's concurrent rendering features, which really can render a component more than once?
Is there ever a good reason to remove StrictMode from part of an app?

Practice these with the AI interviewer →

The plain-language idea

<StrictMode> doesn't render anything itself — it opts a subtree into extra development-only checks, the most surprising of which is: component render functions, and some effects, get called twice in a row. This is intentional and only happens in development; production builds run everything once, normally.

<StrictMode>
  <App />
</StrictMode>

The reasoning: React's whole model depends on render being a pure function of props and state (no side effects, safe to call more than once with the same inputs). If calling something twice produces a visible difference, that's proof it wasn't pure — exactly the kind of bug that could otherwise cause subtle problems under React's newer concurrent features, which really can render a component more than once before committing.

StrictMode: double-invoking to expose hidden bugsStep 1 of 3

<StrictMode> intentionally double-invokes component bodies and effects — only in development.

What people usually miss

Watch out

This is development-only. Production builds do not double-invoke anything — Strict Mode is a diagnostic tool, and the extra calls never ship to users.
If double-invocation breaks your app, the bug was already there. A component that only works correctly when called exactly once wasn't actually pure — Strict Mode surfaced a real fragility, it didn't introduce one.
The most common trip-up: an effect that fetches data with no cleanup, seeing two fetches fire in development. The fix isn't to fight Strict Mode — it's to add a cleanup (e.g., an AbortController) that cancels the first fetch when the effect re-runs, which is correct behavior you'd want anyway.

Why this matters in interviews

"Why does my useEffect run twice in development?" is one of the most-asked real questions from anyone who's actually built with modern React — the strong answer explains why React does this deliberately, not just "that's a known quirk, ignore it."