#136 What is strict mode in React?

React.StrictMode is a wrapper component in React that helps developers find potential problems in their code during development.

• It does not affect production build – only runs checks in development mode.

---

🔹 Why Use Strict Mode?

1. Identifies unsafe lifecycle methods (in class components).
2. Warns about deprecated APIs.
3. Detects unexpected side effects (like running cleanup incorrectly).
4. Highlights potential performance issues (e.g., using legacy methods).
5. Helps make your app future-ready for React features like Concurrent Mode.

---

🔹 How to Use Strict Mode?

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>
);

• Wrap your entire app (or part of it) with <React.StrictMode>.
• React will run extra checks in development.

---

🔹 Example: Detecting Side Effects

import React, { useEffect } from "react";

function StrictModeExample() {
  useEffect(() => {
    console.log("Effect runs");

    return () => {
      console.log("Cleanup runs");
    };
  }, []);

  return <h2>Hello Strict Mode</h2>;
}

export default StrictModeExample;

🔸 In Strict Mode (Development)

• React intentionally runs some functions twice (like useEffect, constructors, render) to check if they are pure and have no unwanted side effects.
• In production → runs only once (no performance cost).

---

🔹 Key Points to Remember

• StrictMode = Developer tool for debugging & warnings.
• Only affects development mode, not production.
• Helps catch side effects, deprecated APIs, unsafe code.
• Common to wrap the whole <App /> inside it.