React · Frontend system thinking

What does React Strict Mode do and why does it double-invoke code?

MediumStrictModedevelopmentpurityUpdated Oct 2026

Short answer

StrictMode is a development-only wrapper that intentionally double-invokes render and effect setup/cleanup to reveal impure code and missing cleanup. It has no effect on the production build.

StrictMode is not a visual component. It turns on extra development checks for its subtree. Rendering twice makes impurities such as mutating a variable during render more visible. Running effects, cleaning up and running them again tests whether setup and teardown are symmetrical.

jsx

function App() {
  return (
    <StrictMode>
      <Router />
    </StrictMode>
  );
}

Wrap the app once at the root. The checks apply only in development.

What StrictMode checks

Components are pure: the same inputs produce the same output
Effects can run, clean up and run again without duplicating resources
Ref callbacks can be attached, detached and reattached safely
Legacy or unsafe lifecycle usage is surfaced

If a development double render breaks the app, the underlying code is usually not resilient to re-rendering. The fix is to remove side effects from render, make effects idempotent, and add proper cleanup. Removing StrictMode hides the warning rather than fixing the defect.

StrictMode does not double-invoke event handlers. It targets render and effect lifecycles, where impurity and missing cleanup cause real bugs.

Follow-ups you should expect

Interviewers use these to check whether the first answer was understanding or memorisation.

1Why does StrictMode run effects twice?
2Does StrictMode affect production behaviour?
3Should you remove StrictMode if an effect fires twice?
4Why doesn't StrictMode double-invoke event handlers?

Say it in the interview

StrictMode is a development-only tool that deliberately double-invokes render and effect lifecycles. It catches impure render logic and effects that do not clean up after themselves. I keep it enabled because the double invocation reveals bugs that would otherwise appear when React re-renders or remounts in production. If something breaks, I fix the effect rather than removing the wrapper.

Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.

Now say it out loud.

Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live React mock interview and get scored feedback on depth, clarity and confidence.

Start a free React interview Browse all questions

What StrictMode checks

Follow-ups you should expect

Related questions

Now say it out loud.