easyFrontend

What is the purpose of `React.StrictMode`?

Q: What is the purpose of `React.StrictMode`?

**Core concept (TL;DR).** <StrictMode> is a **development-only** helper that surfaces potential problems in your app. It intentionally **double-invokes** renders and effects (mount → unmount → remount) to expose impure renders and missing effect cleanup, and it warns about deprecated/unsafe APIs. It renders **no visible UI** and has **zero effect in production**. Dev-only checks; no output, no prod impact <text x="135" y="64" fill="#06b6d4" font-size="11" font-weight="700" text-

318 views

Understand the problem

React.StrictMode is a tool for highlighting potential problems in an application, helping to identify unsafe lifecycles, legacy API usage, and side effects.

developmentdebuggingbest practicesstrictmode

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Wrapping the app in StrictMode

import { StrictMode, useState, useEffect } from "react";

function Demo() {
  const [n] = useState(0);
  useEffect(() => {
    console.log("effect ran");          // logs TWICE in dev under StrictMode
    return () => console.log("cleanup"); // verifying your cleanup is correct
  }, []);
  return <p>n={n}</p>;
}

// In real apps this wraps the root render.
export default function App() {
  return (
    <StrictMode>
      <div style={{ padding: 24, fontFamily: "system-ui" }}><Demo /></div>
    </StrictMode>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you debug React applications?

How do you manage component-level state without `useState` or `useReducer`?