Fundamentalsbeginner
Strict Mode and Development Warnings
Understand what React.StrictMode does in development and why effects may run twice.
<React.StrictMode> is a wrapper component that enables extra development-only checks and warnings for its subtree. It doesn't render any visible UI and has zero effect on production builds — its entire purpose is to surface potential problems early during development.
Strict Mode is like a fire drill: it deliberately puts your building through a stress scenario before a real fire ever happens, so you find the door that doesn't latch properly while it's still just a drill.
Key Concepts
1
Since React 18, one of Strict Mode's most noticeable behaviors is intentionally double-invoking component function bodies, and mounting, unmounting, and remounting components once extra, specifically to help catch effects that aren't properly cleaned up. If your useEffect cleanup doesn't correctly undo whatever the effect set up, running mount → unmount → mount again will expose it (e.g., duplicated subscriptions, doubled event listeners).
useEffect
2
This behavior often confuses developers who see console.log inside an effect fire twice and assume it's a bug in React. In reality, it's a deliberate stress test: if your effect is correctly idempotent and cleans up after itself, double-invocation in development has no visible ill effect and is silently removed in production builds.
console.log
3
Interviewers ask about Strict Mode to see if a candidate has actually hit this in practice and understands it as a signal to fix effect cleanup rather than something to suppress or ignore.