What is StrictMode and what does it do in development?

React.StrictMode is a development tool that helps you find bugs by intentionally stressing your components.

What it does (dev only):

• Double-invokes render functions — component function called twice to detect impure renders
• Double-invokes effects — mounts, unmounts, and remounts every component to surface missing cleanup
• Warns about deprecated APIs — componentWillMount, findDOMNode, etc.

// StrictMode reveals this bug:
function BadComponent() {
  const items = []; // 💥 rendered twice, items reset each time — detected!
  items.push('item'); // pure render must not have side effects
  return 
{items}
;
}

// StrictMode reveals missing cleanup:
useEffect(() => {
  const ws = new WebSocket(url); // mount #1 — created
  // StrictMode: unmount → cleanup should close ws
  //             mount #2 — second connection opened
  // If no cleanup, you'd have two connections — StrictMode exposes this
  return () => ws.close(); // ✅ proper cleanup
}, [url]);

// Usage
root.render(
  
    
  
);