Enhance Code Readability with <StrictMode>

Examples of Using <StrictMode> 

To enable Strict Mode for the entire application, wrap the root component with <StrictMode> during its rendering:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

You can also enable <StrictMode> for any part of your application:

import React from "react";
import { StrictMode } from "react";

export default function GradientBox({ backgroundImage }) {
  return (
    <StrictMode>
      <div
        className={"gradient-box"}
        style={{
          backgroundImage,
        }}
      ></div>
    </StrictMode>
  );
}

Fixing Errors Caused by Double Rendering During Development

React requires each component to be a pure function that returns the same JSX given the same inputs (props, state, context). If a component is not pure, it behaves unpredictably and causes errors. Strict Mode helps identify such errors by invoking some functions twice during development:

• The main logic of a component (excluding event handlers)
• Functions passed to useState, set functions, useMemo, or useReducer
• Certain class component methods, like constructor and render

A pure function always returns the same result when called again, whereas an impure function might alter data, exposing errors early on.

Example: A BookList component where, at first glance, it seems like there are no errors.

<StrictMode> is absent, and at first glance, the component seems to have no issues. But once we add <StrictMode> to our application, the error immediately becomes noticeable.

Our component is working incorrectly, and we noticed this thanks to the double rendering by <StrictMode>.

‍

Now let's see where the error is.

In the BookList component, we are directly modifying the books array by adding the “Add New Book” element to it. This violates React's principles of immutability, and strict mode will catch this issue due to the double rendering of components during development.

‍

In strict mode, React calls component functions twice during development to detect side effects and improper state usage. In this case, it will result in the “Add New Book” element being added to the array twice, highlighting the problem of directly modifying the array.

To fix the error, we need to create a copy of the array before making changes.

Explanation of the Fix: 

Instead of modifying the original books array directly, we create a copy of it using const items = [...books]. Then, we add the “Add New Book” element to the copied array. This prevents immutability issues and makes the component resilient to errors detected in strict mode.

Conclusion 

This example demonstrates how strict mode helps to identify an error related to improper state modification within a component by forcing the component to render twice, making the issue more apparent.