MENU

Strict Mode

StrictMode activates additional checks and warnings for its descendants, in development mode only (it has no effect on the production build). These are viewable on the Console in the browser's Developer Tools (F12).

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

As of React 18, StrictMode's most impactful behavior is that, in development only, it intentionally renders each component twice and runs every Effect's setup and cleanup an extra time on mount. This surfaces bugs caused by impure rendering (side effects that leak outside of render) or missing Effect cleanup (for example, a useEffect that subscribes to something but never unsubscribes) — the same kinds of bugs that would otherwise only appear later, and much more confusingly, under concurrent rendering. None of this double-invoking happens in the production build.

Strict Mode also helps with detecting, mostly in older class-based code:

Unsafe legacy lifecycles.

Legacy string ref API usage (removed entirely as of React 19).

Legacy context API usage via contextTypes/getChildContext (removed entirely as of React 19).

Use of findDOMNode (removed entirely as of React 19).

Although you may have stayed out of these legacy patterns in your own code, you may have inadvertently pulled them in through an older imported library. That's when Strict Mode comes in handy — and, for these specific legacy APIs, why upgrading to React 19 forces the issue by removing them outright rather than merely warning about them.