⚛️ React Strict Mode

? Quick Overview

React.StrictMode is a development-only feature that helps identify potential problems in a React application. It enables additional checks and warnings without affecting production builds.

? Key Concepts

• Runs only in development mode
• Does not impact production performance
• Detects unsafe lifecycle methods
• Helps reveal unexpected side effects
• Encourages future-proof React code

? Syntax & Theory

Strict Mode is enabled by wrapping components with <React.StrictMode>. All child components inherit its checks automatically.

// index.js: Enabling React Strict Mode at the root level
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>
);

⚙️ Code Example: Strict Mode Behavior

In Strict Mode, React intentionally invokes certain functions twice to detect side effects. This includes rendering and effect setup/cleanup.

// ExampleComponent.js: Demonstrates double invocation in development
import React, { useEffect } from "react";

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

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

console.log("Component rendered");
return <h4>Check the console output</h4>;
}

export default ExampleComponent;