What is React StrictMode?

Expected Interview Answer

Step-by-Step Explanation

1. Step 1

   Wrap your tree

   Import StrictMode from 'react' and wrap your root or a subtree, commonly the whole app in main.jsx.

2. Step 2

   It renders nothing

   StrictMode adds no DOM element; it only turns on extra development-time checks for its children.

3. Step 3

   Double-invocation kicks in

   In development React calls render functions, effect setup, and cleanup twice to expose impurity and missing cleanup.

4. Step 4

   Read the warnings

   Watch the console for deprecation and side-effect warnings, then fix the flagged components.

5. Step 5

   Ship safely

   In production builds StrictMode is a no-op, so there is no double render and no performance cost.

Code Example

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
)

import { useEffect, useState } from 'react'

function Clock() {
  const [now, setNow] = useState(Date.now())
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000)
    // Without this cleanup, StrictMode's double-invoke leaks two intervals
    return () => clearInterval(id)
  }, [])
  return <span>{new Date(now).toLocaleTimeString()}</span>
}

Follow-up Questions

• Why does StrictMode invoke effects twice in development?
• Does StrictMode affect production builds at all?
• How does StrictMode help detect impure render functions?
• Which deprecated APIs does StrictMode warn about?
• How does StrictMode relate to React's concurrent features?