Strict Mode in ReactJS

In this article, we are going to see how to highlight potential problems that we might have in a React Application.

React.StrictMode is a helper functionality provided by React which allows us to write better React codes. It provides visual feedback in the form of warnings if we don’t follow the React guidelines, but it works only in the development mode.

Note: They are unsafe to use while using async await.

Use-cases of Strict Mode −

• Identifying components with unsafe lifecycles

• Warning about legacy string ref API usage

• Warning about deprecated findDOMNode usage

• Detecting unexpected side effects

• Detecting legacy context API

We can also bind React.StrictMode to work only for certain components only. For example,

Example

<Comp1/>
<React.StrictMode>
   <Comp3/>
</React.StrictMode>
<Comp2/>

Here, strict mode is only enabled for Comp3 Component only.

If we use deprecated class components of React like componentWillReceiveProps, then it will show the following warning.

Warning