Chapter 69: StrictMode

Core Idea

<StrictMode> opts a subtree into extra development-only checks that surface bugs early — most notably double-invoking component functions and Effects to catch impurity and missing/incorrect cleanup — with zero effect on the production build.

Key Concepts

• Development-only: every check <StrictMode> enables is stripped in production builds — it exists purely to catch bugs while developing, never to change runtime behavior for end users.
• Double-invoking render: components inside StrictMode are called twice per render in development (results from one call are used, the other discarded) — this deliberately surfaces render-phase impurity (Ch 18), since a truly pure component produces identical output both times, while an impure one may not.
• Double-invoking Effects: StrictMode runs mount → cleanup → mount again for Effects on initial mount, specifically to catch missing or incorrect cleanup functions (Ch 36) — an Effect that leaks a subscription or duplicates a connection will misbehave under this double-run, revealing the bug in development rather than only in production edge cases (like a fast remount).
• Checks for deprecated/legacy patterns: also flags usage of legacy APIs and patterns that are being phased out, giving advance warning before they're removed entirely.
• Applying it partially: StrictMode can wrap the whole app (common at the root) or just a specific subtree under active development — it doesn't need to be all-or-nothing.

Code Examples

<StrictMode>
  <App />
</StrictMode>

• What it demonstrates: the typical root-level usage — wrapping the whole app so every component benefits from the extra development checks.

Key Takeaways

1. If double-invoking breaks a component or Effect, that's a genuine bug the double-invoke found — never work around it by removing StrictMode, fix the underlying impurity/missing cleanup instead.
2. Zero production impact means there's no reason not to enable it during development.
3. It can be scoped to just the part of the tree you're actively working on, not only applied app-wide.

Connects To

• Ch 18 (Keeping Components Pure): the impurity bugs the double-render check surfaces.
• Ch 36 (Synchronizing with Effects): the missing-cleanup bugs the double-Effect check surfaces.