Strict Mode in React

React, being a popular JavaScript library for building user interfaces, offers a powerful feature called Strict Mode to enhance development practices and catch potential issues early on. In this blog, we'll dive deep into the significance of Strict Mode in React development and explore how it can help improve your code quality and debugging process.

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:

• 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.
• 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.
• Improved Warnings: Strict Mode includes extra checks and improved warning messages for various common mistakes 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 { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);        

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

import React, { useState } from 'react';

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

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

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

  return ( 
    <div>
      <h1>Strict Component</h1>
      <p>Count: {count} </p>
      <button onClick={incrementDirectly}>Increment Directly</button>
      <button onClick={() => setCount(count + 1)}>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>
    </>
  )
}        

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.

Definitely read the documentation for more insights. https://react.dev/reference/react/StrictMode