What is React strict mode and what are its benefits?

TL;DR

React strict mode is a development tool that helps identify potential problems in an application. It activates additional checks and warnings for its descendants. It doesn't render any visible UI and doesn't affect the production build. The benefits include identifying unsafe lifecycle methods, warning about legacy string ref API usage, detecting unexpected side effects, and ensuring that components are resilient to future changes.

What is React strict mode and what are its benefits?

What is React strict mode?

React strict mode is a feature in React that helps developers identify potential problems in their applications. It is a wrapper component that you can use to wrap parts of your application to enable additional checks and warnings. It does not render any visible UI and does not affect the production build.

To use React strict mode, you can wrap your component tree with the StrictMode component:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

If you're using a framework like Next.js, StrictMode is enabled in development by default, so you usually don't need to wire it up by hand.

Benefits of React strict mode

Detecting unexpected side effects (the headline behavior)

In React 18+, StrictMode intentionally double-invokes the following in development only:

Function component bodies (and class render/constructor)
useState, useMemo, and useReducer initializers and updater functions
Effects: each effect mounts, immediately unmounts, then mounts again (mount → unmount → remount)

The effect remount behavior is the most asked-about StrictMode behavior in interviews. It surfaces effects that aren't safely re-runnable — for example, an effect that subscribes to something but doesn't return a cleanup function will leak a subscription on every remount. Fixing your effects so the remount cycle is a no-op makes your components compatible with future features like reusable state across unmounts.

React 19 keeps this strict effect behavior and continues to use it as the contract function components are expected to satisfy.

Warning about legacy and deprecated APIs

StrictMode warns about APIs that are no longer recommended, including:

The legacy string ref API (use useRef instead — that's the modern default in function components)
Use of findDOMNode
Deprecated context APIs

Surfacing unsafe class lifecycle methods

In legacy class components, StrictMode flags componentWillMount, componentWillReceiveProps, and componentWillUpdate as unsafe. This matters less today since most new code uses function components, but it's still relevant if you're maintaining a class-based codebase.

Ensuring components are resilient to future changes

The additional checks make it easier to spot components that quietly depend on a single mount or hidden side effects, so your codebase stays compatible as React adds features that may mount, unmount, and remount components more aggressively.

What is React strict mode and what are its benefits?

TL;DR