跳到主要内容

React StrictMode

StrictMode = development tool for finding problems

What is StrictMode?​

"Development-only checks"

StrictMode is a React tool that helps identify problems in development by performing additional checks.

"StrictMode is a React development tool that enables additional checks and warnings to help identify potential problems in components."

How to Use​

Wrap app or components

function App() {
  return (
    <React.StrictMode>
      <Component />
    </React.StrictMode>
  );
}

"Wrap your app or components with React.StrictMode to enable additional development checks."

What StrictMode Does​

Checks · Warnings · Double renders

StrictMode helps identify:

  • Unsafe lifecycles
  • Legacy string refs
  • findDOMNode usage
  • Unexpected side effects
  • Legacy context API

"StrictMode checks for unsafe lifecycles, legacy APIs, side effects, and other potential problems."

Double Rendering​

Intentionally renders twice

In development, StrictMode:

  • Intentionally renders components twice
  • Helps find side effects
  • Only in development
  • Not in production

"StrictMode intentionally double-renders components in development to help identify side effects, but not in production."

Why Double Render?​

Find side effects in render

Double rendering helps find:

  • Side effects in render
  • Non-pure functions
  • State updates during render
  • Effects that should be in useEffect

"Double rendering helps identify side effects that should be in useEffect, not in render."

Common Warnings​

Deprecated APIs · Side effects

StrictMode warns about:

  • componentWillMount (deprecated)
  • componentWillReceiveProps (deprecated)
  • Legacy string refs
  • findDOMNode usage
  • Side effects in render

"StrictMode warns about deprecated lifecycle methods, legacy APIs, and side effects in render."

Production Behavior​

No effect in production

  • StrictMode has no effect in production
  • Only development checks
  • Doesn't affect performance
  • Safe to leave in code

"StrictMode only runs in development - it has no effect in production builds."

Best Practices​

✅ Use StrictMode in development ✅ Fix warnings it identifies ✅ Keep it in code (safe) ✅ Use for new projects ✅ Helps catch bugs early ❌ Don't ignore warnings ❌ Don't remove it (no production cost)

9️⃣ Example Issues Found​

Side effects in render

// ❌ StrictMode will catch this
function Component() {
  document.title = "New Title"; // Side effect in render
  return <div>Content</div>;
}

// ✅ Fixed
function Component() {
  useEffect(() => {
    document.title = "New Title";
  }, []);
  return <div>Content</div>;
}

"StrictMode helps find issues like side effects in render that should be in useEffect."

"React StrictMode is a development tool that enables additional checks and warnings. It intentionally double-renders components in development to find side effects, warns about deprecated APIs and unsafe lifecycles, and helps identify problems early. It has no effect in production and is safe to keep in code."

🧠 Ultra-Short Cheat Sheet​

Development tool
Additional checks
Double renders (dev only)
Warns about deprecated APIs
Finds side effects
No production effect
Safe to keep in code