Strict Mode in React

The react StrictMode is a Developer Tool which is used by React Developers primarily  for highlighting possible problems in a web applications. It activates additional depreciation checks and warnings for its child component. One of the main advantages of StrictMode is that it provides visual feedback (warning/error messages) whenever the React guidelines and recommended practices are not followed. Just like the React Fragment, the React StrictMode Components does not render any visible UI. 

The React Strict Mode can be viewed as a helper components that allows developers to code efficiently and brings to their attention to any suspicious code which may have been accidentally added to the application. The react StrictMode can be applied to any section of the applications, not necessarily to the entire application. It is especially helpful to use while developing new codes or debugging the applications.

Example :

function StictModeDemo() {
return (
<div>
<Component1 />
<React.StrictMode>
<React.Fragment>
<Component2 />
<Component3 />
</React.Fragment>
</React.StrictMode>
<Component4 />
</div>
);
}

In the above example, the StrictMode checks will be applicable only on Component2 and Component3 (as they are the child components of React.StrictMode). Contrary to this, Component1 and Component4 will not have any checks, as they are not being called inside the <React.StrictMode/> tags. Thus any component or piece of code enclosed within the <React.StrictMode/> tags will have the StrictMode checks. 

 We are not required to import React Strict Mode  separately as its a part of the React Library. 

As of React v17, the following functionalities is supported in react StrictMode: 

• The Identifying string’s refs from the past. 
• The findDOMNode functions has been deprecated. 
• The use of the legacy Context API(Application programming interface) is being detected. 
• Detecting dangerous lifecycle methods in  that React has deprecated. 
• Unexpected side effects in React component are detected.