What is Strict Mode in React?

React Strict Mode is a development-only tool that helps developers write better React applications by highlighting potential problems in the codebase. This article provides a clear overview of what React Strict Mode is, how to implement it, and the specific issues it helps detect, such as deprecated APIs and unexpected side effects.

Understanding React Strict Mode

React Strict Mode is a helper component that analyzes your React application during development. It does not render any visible UI. Instead, it activates extra checks and warnings for its child components.

Because it is a development-only tool, Strict Mode has no impact on production builds, meaning it will not affect your application’s performance or behavior for end-users.

How to Enable Strict Mode

You can enable Strict Mode for your entire application or only for specific parts. To enable it globally, wrap your root component with <React.StrictMode> in your entry file (usually index.js or main.jsx):

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

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

If you only want to run checks on a specific section of your app, you can wrap just that component:

import React from 'react';

function MyComponent() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <Sidebar />
      </React.StrictMode>
      <Footer />
    </div>
  );
}

Key Features of React Strict Mode

Strict Mode helps improve application stability by enforcing best practices. Here are the main issues it detects:

1. Detecting Unexpected Side Effects (Double Rendering)

React assumes that the render phase of a component is a pure function with no side effects. To help you find impure code, Strict Mode intentionally double-invokes certain functions in development. These include: * Class component constructor, render, and shouldComponentUpdate methods * Class component static getDerivedStateFromProps * Function component bodies * State updater functions (like the ones passed to useState) * Functions passed to useMemo, useReducer, or useCallback

If a function is pure, running it twice will not change the behavior of your application. If running it twice causes unexpected bugs, it means you have a side effect in your render phase that needs to be moved to useEffect.

2. Ensuring Reusable State (Double Effects)

In React 18 and later, Strict Mode introduces an additional check: it mounts, unmounts, and remounts every component. This ensures that your effects properly clean up after themselves. If a component is destroyed and recreated, the state should restore correctly. This prepares your application for future React features where components might be preserved and reused.

3. Warning About Legacy Lifecycles

Strict Mode identifies the use of deprecated lifecycle methods, such as componentWillMount, componentWillReceiveProps, and componentWillUpdate. These methods are unsafe for use in modern, asynchronous React rendering.

4. Warning About Legacy Ref APIs

Older versions of React allowed the use of string refs (e.g., <div ref="myRef" />). This pattern has performance issues and is considered legacy. Strict Mode warns you if your code uses string refs, prompting you to use useRef or callback refs instead.

5. Warning About Deprecated findDOMNode

Historically, findDOMNode was used to search the DOM tree for a class instance. This method is slow and breaks component abstraction. Strict Mode flags any usage of findDOMNode so you can replace it with standard DOM refs.

6. Detecting Legacy Context API

The original React Context API was error-prone and has been replaced by the modern useContext hook and <Context.Provider> syntax. Strict Mode warns you if your application is still using the legacy context API.