You can enable Strict Mode by wrapping your application (or part of it) inside <React.StrictMode>.

Example: Enabling Strict Mode in index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

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

What Does Strict Mode Do?

Strict Mode performs the following checks and warnings in development mode:

1. Detects Unsafe Lifecycle Methods (for Class Components)
   • Helps migrate away from deprecated methods like componentWillMount and componentWillReceiveProps.
2. Warns About Side Effects in useEffect Cleanup
   • Helps find unintended side effects by calling certain functions twice in development (like useEffect).
3. Identifies Legacy String Refs
   • Encourages the use of useRef instead of legacy ref strings.
4. Detects Unintended Side Effects in Components
   • Helps ensure state updates are pure by calling component functions twice (in development mode only).
5. Warns About Deprecated Features
   • Helps prepare your app for future React versions by identifying old patterns.

Why Does useEffect Run Twice in Strict Mode?

If you’re using Strict Mode, you might notice that your useEffect runs twice in development mode.
This happens because React intentionally mounts and unmounts components twice to detect unexpected side effects.

import React, { useEffect } from "react";

const App = () => {
  useEffect(() => {
    console.log("Component mounted!");

    return () => {
      console.log("Component unmounted!");
    };
  }, []);

  return <h1>Hello, React!</h1>;
};

export default App;

Output in Strict Mode:

Component mounted!
Component unmounted!
Component mounted!

This helps catch issues like unintended API calls or uncontrolled side effects.

Should You Use Strict Mode?

Yes, in development! It helps catch bugs early.

No, in production. It’s only for debugging and does not affect the production build.

How to Disable Strict Mode?

Simply remove <React.StrictMode> from index.js:

root.render(<App />);

This will stop extra checks like double rendering.