Strict Mode
Strict Mode is a development-only wrapper, written , that intentionally double-invokes renders and effects to surface impure code and missing cleanup. It runs nothing extra in production; its goal is to help you catch side-effect bugs early by making them obvious during development.
Learn Strict Mode in our free React course — an interactive lesson with runnable examples, a practice exercise and a quick recall.
Part of the free React course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.
1️⃣ What Strict Mode Is
You opt in by wrapping part of your tree in (often the whole app at the root). In development it adds extra checks: it double-invokes component render functions, double-runs effects with their cleanup, and warns about deprecated APIs. None of this ships to production — the production build renders once and runs each effect once.
2️⃣ Double-Invoke Surfaces Impurity
A component's render must be pure : given the same props and state it returns the same JSX and causes no side effects. By calling render twice, Strict Mode exposes impure code — if a render mutates a module variable, writes to the DOM, or sends a request, the second call drifts or duplicates, making the bug visible immediately instead of in production.
3️⃣ Writing Effects That Survive It
In development Strict Mode runs an effect, runs its cleanup , then runs the effect again — simulating an immediate unmount/remount. An effect that cleans up everything it sets up (clear timers, abort fetches, unsubscribe) passes this test invisibly. If you see a double subscription, a leaked interval, or a doubled request, that is the missing cleanup talking.
These steps describe what Strict Mode does to an effect in development. Put them in the right order:
📋 Quick Reference
No. It is intentional in development to surface impure renders and missing cleanup. Production runs once.
2. Your effect runs twice and leaks. What is missing?
A cleanup function that undoes the setup (clear the timer, abort the fetch, unsubscribe).
Cause side effects — it must be pure: same inputs produce the same output with no external mutation.
Simulate Strict Mode's start/cleanup/start cycle for an interval effect and prove only one timer remains active. Run it and check your output.
Practice quiz
What does <React.StrictMode> do in development?
- It enables TypeScript checking
- It minifies your bundle
- It intentionally double-invokes renders and effects to surface impure code and missing cleanup
- It blocks deprecated APIs from running
Answer: It intentionally double-invokes renders and effects to surface impure code and missing cleanup. Strict Mode is a dev-only wrapper that double-invokes renders and re-runs effects (with cleanup) so side-effect bugs become visible early.
Does Strict Mode affect your production build?
- No — all its extra invocations and warnings are development-only
- Yes, it doubles every render in production too
- Only if you enable a flag
- It removes your effects in production
Answer: No — all its extra invocations and warnings are development-only. Production renders once and runs each effect once. Strict Mode's extra checks happen only in development.
Why does Strict Mode double-invoke your render function?
- To make the app faster
- To pre-cache the output
- To test network calls
- To surface impure renders — if render mutates external state, the second call drifts and exposes the bug
Answer: To surface impure renders — if render mutates external state, the second call drifts and exposes the bug. A render must be pure. Calling it twice reveals impurity: a mutated module variable or side effect during render shows up immediately.
What must a render function never do?
- Return JSX
- Cause side effects — it must be pure: same inputs, same output
- Read its props
- Use derived values
Answer: Cause side effects — it must be pure: same inputs, same output. Render must be pure. Side effects (mutating state, writing the DOM, sending requests) belong in useEffect, not in the render body.
In dev, what cycle does Strict Mode run for an effect?
- Run the effect, run its cleanup, then run the effect again
- Run the effect twice with no cleanup
- Run only the cleanup
- Skip the effect entirely
Answer: Run the effect, run its cleanup, then run the effect again. Strict Mode simulates an immediate unmount/remount: setup, cleanup, setup. A correctly-cleaned effect passes this invisibly.
Your fetch fires twice in development. What is the proper fix?
- Disable Strict Mode
- Wrap the fetch in setTimeout
- Add a correct cleanup (e.g. abort the request with AbortController) so the double-invoke is harmless
- Move the fetch into render
Answer: Add a correct cleanup (e.g. abort the request with AbortController) so the double-invoke is harmless. A double fetch signals missing cleanup. Abort or cancel in the cleanup function rather than turning off the check that found the bug.
What makes an effect 'safe' under Strict Mode?
- It uses no dependencies
- It pairs every setup with a cleanup that fully undoes it (clear timers, abort fetches, unsubscribe)
- It runs only once
- It avoids state
Answer: It pairs every setup with a cleanup that fully undoes it (clear timers, abort fetches, unsubscribe). An effect that cleans up everything it sets up can run twice with no visible difference — which is the whole point of the check.
Is the double-invoke a bug in React?
- Yes, and you should report it
- Only on first mount
- Only in older React versions
- No — it's intentional in development to expose impure renders and missing cleanup
Answer: No — it's intentional in development to expose impure renders and missing cleanup. It's a deliberate development aid. Production runs once; the doubling exists to catch problems before they ship.
Should you rely on the double-invoke behavior in your app logic?
- Yes, design around it
- No — it only happens in dev; production runs once, so don't depend on it
- Yes, for production analytics
- Only for effects, not renders
Answer: No — it only happens in dev; production runs once, so don't depend on it. Expecting doubled behavior in production is a mistake. The extra invocation is a dev-only diagnostic.
How do you opt into Strict Mode?
- Add a flag to package.json
- Install a separate package
- Wrap part of your tree (often the whole app) in <React.StrictMode>
- Set NODE_ENV to strict
Answer: Wrap part of your tree (often the whole app) in <React.StrictMode>. You wrap your component tree in <React.StrictMode> (or <StrictMode>), usually at the root in main.jsx, to enable the dev-only checks.