React Strict Mode: Syntax, Usage, and Examples

React strict mode helps identify potential issues in a React application by enabling additional checks and warnings. It doesn’t affect the behavior of your app in production but helps catch side effects and legacy patterns during development.

How to Use React Strict Mode

To enable react strict mode, wrap your application (or a part of it) with <React.StrictMode>. This component is used in development mode only and does not impact production builds.

Basic Usage

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• <React.StrictMode> is a wrapper component that doesn’t render anything in the UI.
• It only runs extra checks in development mode.
• It does not introduce breaking changes but can reveal issues in your code.

Applying Strict Mode to Part of an App

You can also wrap specific components instead of the entire app.

function App() {
  return (
    <div>
      <h1>My React App</h1>
      <React.StrictMode>
        <SomeComponent />
      </React.StrictMode>
      <AnotherComponent />
    </div>
  );
}

In this case, only SomeComponent will be checked by react strict mode, while AnotherComponent will not be affected.

When to Use React Strict Mode

Detecting Side Effects in Components

React strict mode helps identify unintended side effects in useEffect by intentionally running certain functions twice.

Encouraging Modern Best Practices

Strict mode warns when your app uses outdated features like componentWillMount and componentWillReceiveProps.

Finding Issues with Legacy APIs

If a library uses older React lifecycle methods, strict mode will alert you so you can find an alternative.

Examples of React Strict Mode in Action

Detecting Side Effects in useEffect

React strict mode runs useEffect cleanup functions twice in development to help detect unintended behaviors.

import { useEffect } from "react";

function DemoComponent() {
  useEffect(() => {
    console.log("Effect runs");

    return () => {
      console.log("Cleanup runs");
    };
  }, []);

  return <div>Check the console logs.</div>;
}

In development mode, you'll see:

Effect runs
Cleanup runs
Effect runs

In production mode, it will run only once.

Warning About Legacy Lifecycle Methods

If a component uses componentWillMount, componentWillReceiveProps, or componentWillUpdate, react strict mode warns you.

class OldComponent extends React.Component {
  componentWillMount() {
    console.log("This lifecycle method is deprecated");
  }

  render() {
    return <h1>Legacy Component</h1>;
  }
}

In development, React will log:

Warning: componentWillMount is deprecated and will be removed in future versions of [React](https://mimo.org/glossary/react).

Identifying Unsafe State Updates

Updating state inside useEffect without dependencies can lead to unintended behaviors. Strict mode helps catch such mistakes.

import { useState, useEffect } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(count + 1); // This will cause an infinite loop
  });

  return <p>Count: {count}</p>;
}

React will warn about this issue in strict mode, preventing an infinite loop.

Learn More About React Strict Mode

What is React Strict Mode?

React strict mode is a tool that helps developers find issues in their React apps. It doesn’t change how the app works but highlights problems related to side effects, legacy APIs, and state updates.

Why Does React Strict Mode Cause Double Renders?

Strict mode intentionally renders components twice to help catch side effects that should be cleaned up. If a function causes unwanted behavior on re-render, it’s a sign that it needs improvement.

How to Disable React Strict Mode

If react strict mode causes issues with third-party libraries, you can remove it by modifying index.js.

ReactDOM.createRoot(document.getElementById("root")).render(
  <App /> // No Strict Mode
);

However, keeping strict mode enabled is recommended for better debugging.

React Router and Strict Mode

React router works fine with strict mode, but certain outdated versions may cause warnings. Updating to the latest React router version solves most issues.

Turning Off React Strict Mode for Specific Components

If only a specific component has issues with strict mode, wrap the rest of the app with <React.StrictMode> but exclude the problematic component.

function App() {
  return (
    <div>
      <React.StrictMode>
        <SafeComponent />
      </React.StrictMode>
      <ProblematicComponent />
    </div>
  );
}

React strict mode helps find problems early, making apps more stable and ready for future updates. While it may cause double renders during development, this behavior ensures better long-term performance and maintainability.