⚛️ React.StrictMode & Warnings

? Quick Overview

React.StrictMode is a development-only tool that helps you write cleaner and safer React apps.

✅ Runs extra checks and shows helpful warnings in development.
✅ Highlights deprecated APIs and unsafe patterns.
✅ Double-renders some parts in development to catch side effects.
✅ Has no impact on the production build.

? What is React.StrictMode?

React.StrictMode is a wrapper component that you can place around part (or all) of your app. Everything inside <React.StrictMode> ... </React.StrictMode> gets extra checks in development mode.

It helps you:

Identify unsafe lifecycle methods in class components.
Spot unexpected side effects in hooks like useEffect().
Avoid deprecated patterns that may break in future React versions.

Remember: users in production never see these extra checks — they are only for you, the developer.

? Syntax & Basic Usage

Typically, you wrap your root application component with <React.StrictMode> in index.js (or main.jsx).

? View Code Example (index.js)

// index.js using React.StrictMode for development checks
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>
);

Here, <React.StrictMode> wraps the <App /> component. React will now run additional checks for every component rendered under <App />.

⚠️ Why Use StrictMode?

✅ Detects deprecated lifecycle methods like componentWillMount or componentWillReceiveProps.
✅ Warns when side effects are not safe or may run multiple times.
✅ Helps you write code that is ready for future React features (like concurrent rendering).
✅ Encourages you to follow modern React practices (hooks, refs, etc.).

? Common Warnings You Might See

⚠️ "findDOMNode is deprecated in StrictMode" — use ref instead of direct DOM access.
⚠️ "Warning: useEffect called multiple times" — caused by StrictMode’s intentional double-invocation in development.
⚠️ "Legacy string ref usage" — replace string refs with React.createRef() or useRef().

These warnings are not “errors” — they are React’s way of telling you that some parts of your code can be improved or modernized.

? Double Rendering in StrictMode (React 18+)

In React 18, components inside <React.StrictMode> are intentionally rendered twice in development (not in production). This helps catch side effects that are not pure or not idempotent.

? View Code Example (Double useEffect logs)

// App.jsx showing double logging in StrictMode (development only)
import React, { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("✅ useEffect ran");
  }, []);

  console.log("? Component rendered");

  return <h1>Hello StrictMode!</h1>;
}

export default App;

?️ Console Output in Development

When this component is wrapped in <React.StrictMode>, you might see:

? Component rendered (printed twice)
✅ useEffect ran (also printed twice)

This happens only in development and only because of StrictMode’s extra checks. In the production build, the component renders normally and effects run once.

? Limiting StrictMode to a Part of the Tree

You do not have to wrap your entire app. You can also test only a specific subtree with React.StrictMode.

? View Code Example (Partial StrictMode)

// index.js with StrictMode applied to only some components
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import LegacyWidget from "./LegacyWidget";

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

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

// LegacyWidget is rendered without StrictMode checks
ReactDOM.createRoot(document.getElementById("legacy-root")).render(
  <LegacyWidget />
);

This pattern is useful when you are gradually migrating older code to follow modern React patterns.

? Tips & Best Practices

Keep <React.StrictMode> at the top level (usually in index.js).
Treat warnings as learning opportunities, not as noise.
When you see a warning, search the React docs — there is usually a recommended modern alternative.
Remember: StrictMode is a development tool only — it does not slow down your production app.
If you are debugging confusing double logs, check if StrictMode is enabled before panicking.

? Try It Yourself

Create a small React app and wrap it in <React.StrictMode> in index.js.
Add a component with useEffect() that logs to the console and observe the double logs in development.
Temporarily remove React.StrictMode and see how the logs change.
Introduce an old pattern (like string refs or componentWillMount) and see what warnings appear, then fix them using modern APIs.

Goal: Understand how React.StrictMode surfaces warnings, helps you detect potential issues early, and prepares your project for future React versions.

React.StrictMode and Warnings