Have you heard about Hack Frontend Community?Join us on Telegram!

By continuing to use the platform, you accept the terms of the Privacy Policy and the use of cookies.

React.StrictMode: What It Does and Why You Need It

What is StrictMode?

React.StrictMode is a tool for highlighting potential problems in an application. It activates additional checks and warnings only in development mode.

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

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

Production:

StrictMode doesn't affect production builds. All checks work only in development.

What is it for?

StrictMode helps:

Identify components with unsafe lifecycle methods
Warn about using deprecated API
Detect unexpected side effects
Warn about using deprecated context API
Ensure reusable state (React 18+)

Double rendering

StrictMode intentionally calls functions twice to help find side effects:

function Counter() {
  const [count, setCount] = useState(0);
  
  console.log('Render'); // In StrictMode will output twice!

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

Called twice:

Function component body
Functions inside useState, useMemo, useReducer
Constructor function (for class components)
Methods render, shouldComponentUpdate, getDerivedStateFromProps

Detecting side effects

Problematic code

let globalCounter = 0;

function Component() {
  // Side effect outside useEffect!
  globalCounter++; // In StrictMode will increment twice
  
  return <div>Counter: {globalCounter}</div>;
}

Correct code

let globalCounter = 0;

function Component() {
  useEffect(() => {
    // Side effects in useEffect
    globalCounter++;
    
    return () => {
      globalCounter--; // Cleanup
    };
  }, []);
  
  return <div>Counter: {globalCounter}</div>;
}

Detecting deprecated methods

StrictMode will warn about using deprecated lifecycle methods:

class MyComponent extends React.Component {
  componentWillMount() {
    // Warning: deprecated method
  }

  componentWillReceiveProps(nextProps) {
    // Warning: deprecated method
  }

  componentWillUpdate(nextProps, nextState) {
    // Warning: deprecated method
  }

  render() {
    return <div>Hello</div>;
  }
}

Correct alternatives

class MyComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {
    // Instead of componentWillReceiveProps and componentWillUpdate
    return null;
  }

  componentDidMount() {
    // Instead of componentWillMount
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // To get information before DOM update
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // Work with snapshot
  }

  render() {
    return <div>Hello</div>;
  }
}

Detecting deprecated context API

Deprecated way (warning)

class Parent extends React.Component {
  static childContextTypes = {
    color: PropTypes.string
  };

  getChildContext() {
    return { color: 'purple' };
  }

  render() {
    return <Child />;
  }
}

Modern way

const ThemeContext = React.createContext('light');

function Parent() {
  return (
    <ThemeContext.Provider value="dark">
      <Child />
    </ThemeContext.Provider>
  );
}

function Child() {
  const theme = useContext(ThemeContext);
  return <div>Theme: {theme}</div>;
}

Using in part of application

You can apply StrictMode only to specific components:

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

Header and Footer won't be checked, only Sidebar and Content.

React 18: reusable state

In React 18 StrictMode simulates unmounting and remounting components:

function Component() {
  useEffect(() => {
    console.log('Mount');
    
    return () => {
      console.log('Unmount');
    };
  }, []);

  return <div>Hello</div>;
}

In StrictMode will output:

Mount
Unmount
Mount

This helps ensure the component properly cleans up resources when unmounting.

Console log issues

Problem

function Component() {
  console.log('Render'); // Outputs twice in StrictMode
  
  return <div>Hello</div>;
}

Solution 1: Ignore

Remember that double call is only in development. In production there will be one call.

Solution 2: React DevTools

React DevTools automatically removes duplicate logs from StrictMode:

// Install React DevTools extension
// Duplicate logs will be hidden automatically

Solution 3: Wrap in condition

function Component() {
  if (process.env.NODE_ENV === 'development') {
    // Logs only in development, but still twice
    console.log('Render');
  }
  
  return <div>Hello</div>;
}

When to disable StrictMode?

Not recommended to disable

StrictMode helps write quality code. But there are cases:

When integrating with third-party libraries

If a library causes warnings you can't fix:

function App() {
  return (
    <div>
      <React.StrictMode>
        <MyApp />
      </React.StrictMode>
      
      {/* Third-party library without StrictMode */}
      <ThirdPartyComponent />
    </div>
  );
}

When debugging in console

If double logs interfere with debugging, temporarily disable:

// Temporarily for debugging
// <React.StrictMode>
  <App />
// </React.StrictMode>

Don't forget to restore StrictMode after debugging!

Best Practices

Use from the start

Add StrictMode when creating project:

// index.js
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>
);

Fix warnings

Don't ignore StrictMode warnings. They point to real problems.

Use in CI/CD

Make sure tests run with StrictMode:

// setupTests.js
import { render } from '@testing-library/react';

function renderWithStrictMode(ui) {
  return render(
    <React.StrictMode>
      {ui}
    </React.StrictMode>
  );
}

FAQ

Does StrictMode affect performance?

No, in production StrictMode is completely disabled. All checks work only in development.

Why does my code execute twice?

This is intentional StrictMode behavior to detect side effects. In production code will execute once.

Should I wrap the entire application?

It's recommended to wrap the entire application, but you can apply selectively to problematic parts.

Conclusion

React.StrictMode:

Tool for identifying problems in development
Doesn't affect production
Intentionally calls functions twice
Warns about deprecated methods and API
Helps write clean code without side effects
Prepares for future React versions
Recommended for use in all projects

In interviews:

Important to be able to:

Explain what StrictMode is and what it's for
Describe why code executes twice
List what problems it helps identify
Explain that StrictMode doesn't affect production
Give examples of proper side effect handling

Practice React Problems

Back

Forward