Strict Mode in React

In React, Strict Mode is a development mode feature that helps you catch potential problems in your application’s code and encourages best practices. It performs a series of checks and warnings during rendering and helps you identify and fix issues in your code that might lead to bugs or unexpected behavior in production.

Strict Mode provides the following benefits :

1. Identifying Unsafe Practices: It helps identify and warn about unsafe practices in your code, such as using deprecated lifecycle methods, accessing the state directly, or setting read-only properties.
2. Detecting Side Effects: It highlights components with unexpected side effects during rendering. This can help you catch unintentional side effects and optimize your component’s rendering performance.
3. Improved Warnings: Strict Mode Includes extra checks and improved warning messages for various common mistakes and potential issues, making it easier to spot and potential issues, making it easier to spot and fix problems early in the development process.

To enable Strict Mode in a React application, you can wrap your entire application or specific components in the <React.StrictMode> component. Here’s an example of how to use it:

import React from 'react'; 
import ReactDom from 'react-dom';
 ReactDom.render( 
<React.StrictMode> 
<App/>
 <React.StrictMode>,
 document.getElementById('root')
 );

Now, let’s create a “StrictComponent” to illustrate some of the benefits of Strict Mode:

import React, { useState } from 'react';

function StrictComponent() {
  const [count, setCount] = useState(0);

  // Simulate a side effect outside the render method
  console.log('Rendered!');

  // Function to increment count properly using setCount
  const incrementProperly = () => {
    setCount(count + 1);
  };

  // Attempt to modify state directly should trigger a warning
  const incrementDirectly = () => {
    count++; // This should trigger a warning
    console.log(`Count: ${count}`);
  };

  return (
    <div>
      <h1>Strict Component</h1>
      <p>Count: {count}</p>
      <button onClick={incrementDirectly}>Increment Directly</button>
      <button onClick={incrementProperly}>Increment Properly</button>
    </div>
  );
}

export default StrictComponent;

In this example, we have a component called “StrictComponent” that contains a state variable “count.” Inside the render method, we have a console.log statement, simulating a side effect. Additionally, there’s a button that attempts to modify the “count” state directly, which is an unsafe practice.

You can also enable Strict Mode for any part of your application:

import { StrictMode } from 'react';

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

When you render the “StrictComponent” within a <React.StrictMode> wrapper, React will perform extra checks and display warnings for unsafe practices and side effects. You will see warnings in the browser’s console indicating that you should not modify the state directly and that there’s a side effect during rendering.

By using Strict Mode during development, you can catch and address these issues early, leading to a more reliable and optimized React application. Once you’ve fixed the problems identified by Strict Mode, your application will be more robust and ready for production.