React Strict Mode: What It Does and When to Use It

React.StrictMode is a tool that helps find potential problems in your React app by running extra checks and warnings during development. It does not affect the app’s output but helps you write safer and cleaner code.

How It Works

Think of React.StrictMode as a helpful coach watching your React app while you build it. It doesn’t change how your app looks or behaves for users, but it runs extra tests behind the scenes to catch mistakes early.

For example, it runs some functions twice to spot unexpected side effects, warns about outdated or unsafe code patterns, and highlights parts of your code that might cause bugs later. This is like a safety net that helps you fix problems before they reach your users.

Because it only runs in development mode, it won’t slow down or change your app when you publish it.

Example

This example shows how to wrap your app with React.StrictMode to enable these extra checks.

javascript

import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  React.useEffect(() => {
    console.log('Effect runs');
  }, []);

  return <h1>Hello, React Strict Mode!</h1>;
}

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

Output

Hello, React Strict Mode!

When to Use

Use React.StrictMode during development to catch bugs early and improve your code quality. It helps spot unsafe lifecycle methods, deprecated APIs, and unexpected side effects.

It is especially useful when upgrading React versions or adding new features, as it warns about patterns that might break in the future.

Since it only runs in development, you can safely keep it on without affecting your users.

Key Points

• Does not affect production: Runs only in development mode.
• Finds bugs early: Detects unsafe code and side effects.
• Helps with upgrades: Warns about deprecated React features.
• Wrap your app: Use it by wrapping your root component.

Key Takeaways

React.StrictMode helps find bugs by running extra checks during development.

It does not change your app’s appearance or behavior in production.

Wrap your root component with React.StrictMode to enable it.

It warns about unsafe lifecycle methods and deprecated APIs.

Use it to improve code quality and prepare for React upgrades.