Skip to content
masterclassBuddyTech Buzz5 fresh blogs · 5:00 AM IST
Start learning

React 19+ · Component

StrictMode

StrictMode enables extra development-only checks for a component subtree. It helps reveal impure rendering, missing Effect or ref cleanup, and deprecated API usage early.

How it works

StrictMode is a development-only wrapper that activates extra checks for the component tree inside it. React uses those checks to expose impure rendering, missing Effect or ref cleanup, and deprecated API usage before these problems reach production.

Syntax

<StrictMode>{children}</StrictMode>

Returns

A component wrapper that renders its children and enables additional development-only checks for the enclosed tree.

Key points

  • Use StrictMode as a development diagnostic wrapper for catching common component bugs earlier.
  • The wrapper applies its additional checks to the component tree placed inside it.
  • React performs an additional render in development to reveal render logic that is not pure.
  • Effects receive an extra development-only setup cycle so missing cleanup becomes visible.
  • Ref callback cleanup problems are exposed by an additional development-only ref-callback cycle.
  • Strict Mode checks the wrapped components for deprecated API usage.
  • Wrap the root element with StrictMode to enable checks across the whole application.

Common mistakes

  • The extra renders, Effect runs, ref-callback runs, and deprecation checks occur only during development; they do not represent production behavior.

Example: Enable Strict Mode for an application

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

function App() {
  return <h1>Hello, React!</h1>;
}

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

Wrap the application root to enable Strict Mode checks throughout the rendered component tree during development.

When to use it

Application-wide bug detection

Enable diagnostics across an entire application during development.

Scoped diagnostics

Inspect a feature or subtree without changing the rest of the application.

Cleanup verification

Detect missing Effect and ref cleanup before production.

  • createRoot
  • useEffect
  • ref callbacks

Source: Fixing bugs found by re-running Effects in development. Checked 2026-10-15.