React Strict Mode

In React Strict Mode, you can identify possible codebase problems in your application. By enabling Strict Mode, React provides additional warnings and checks during rendering and updates to help you avoid common mistakes and unsafe practices.

Strict Mode can be enabled by wrapping the root component of your React application with the React.StrictMode component.

Example

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

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

When you wrap your App component in React.StrictMode, React will perform additional checks and warn you about potential errors.

These include:

A warning will be logged if a component uses unsafe lifecycle methods such as componentWillMount, componentWillReceiveProps, or componentWillUpdate.

A strict mode detects unexpected side effects by intentionally invoking some methods twice and checking if they are consistent. You will be able to identify potential issues due to side effects in your code as a result.

In Strict Mode, string refs (ref="myRef") are forbidden since they are considered legacy and may be removed in future React versions. UseRef hooks or callback refs are recommended instead.

Strict Mode logs warnings in the console if your application uses deprecated React features and encourages you to update them.

The Strict Mode was designed for development purposes, not for production environments. Although some of the additional checks and warnings may result in legitimate warnings, they are designed to help you find and fix potential problems early on in the development process.