Strict Mode and Detecting Unintentional Side Effects

1. What is React StrictMode?

<React.StrictMode> is a built-in development tool provided by React to highlight potential problems in an application. Like JavaScript's "use strict", it activates additional runtime checks and warnings for its child components.

StrictMode is enabled by wrapping your root component tree inside <React.StrictMode> in src/main.jsx:

2. The Development-Only Guarantee

A critical point of reassurance for every React engineer is: StrictMode checks run ONLY in development mode. StrictMode has zero impact on production builds. It does not add overhead, double-invoke functions, or increase bundle size in production.

3. Why Does StrictMode Double-Invoke Functions?

If you add console.log('Rendering component') inside a component or console.log('Running effect') inside useEffect, you will notice that in development, it logs twice!

Why does React do this on purpose?

React's future roadmap and concurrent rendering capabilities rely on components being pure functions. An impure function produces subtle bugs, race conditions, and memory leaks that can be difficult to spot in simple development tests.

To expose accidental side effects, StrictMode deliberately:

1. 1
   Re-renders component bodies twice: Ensures that component rendering logic is pure and produces the same output without mutating external variables.
2. 2
   Re-runs effects twice (Mount -> Cleanup -> Mount): Verifies that your useEffect has a valid cleanup function that correctly tears down subscriptions, event listeners, and timers.

4. Catching an Impure Bug with StrictMode

Consider this accidental mutation:

In standard production, rendering this with name "Aman" might display Guests: 1.

Under StrictMode in development, React re-renders twice, so guestList.push runs twice! The screen displays Guests: 2!

The developer immediately notices that the count is wrong, uncovering the accidental external mutation that would have caused severe bugs in production.