React Strict Mode

React Strict Mode: Development Warnings & Double-Effect Execution

<React.StrictMode> is a developer tool that enables extra checks, warnings, and intentionally double-invokes effects during development to uncover hidden bugs and unsafe side effects.

Strict Mode does not render any visible UI node and operates only in development mode—it is automatically stripped out in production builds.

Key Behaviors Enabled by Strict Mode

1. Double-Invoking Effects (useEffect): Mounts, unmounts, and re-mounts components in development to verify effect cleanup functions work properly.
2. Detecting Unsafe Lifecycles: Warns against legacy class lifecycles like componentWillMount.
3. Deprecated API Warnings: Flags legacy string refs and findDOMNode usage.
4. Detecting Unexpected Side Effects: Double-executes class constructors, render methods, and state updater functions to highlight non-pure functions.

Setup in Application Root

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';

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

Understanding Double Effect Execution

When running under <React.StrictMode>, React 18 intentionally runs useEffect cleanup and re-mount logic:

import React, { useEffect } from 'react';

export default function SocketLogger() {
  useEffect(() => {
    console.log('1. Connecting to WebSocket...');
    
    return () => {
      console.log('2. Disconnecting WebSocket...');
    };
  }, []);

  return <div>WebSocket Monitor</div>;
}

// In Development Console under Strict Mode:
// Output:
// 1. Connecting to WebSocket...
// 2. Disconnecting WebSocket...
// 1. Connecting to WebSocket...

Best Practices & Gotchas

• Do Not Remove Strict Mode to Fix Double Logs: If double logs reveal bugs (e.g., duplicated API calls or memory leaks), fix the missing useEffect cleanup function rather than removing Strict Mode.
• No Impact on Production: Strict Mode checks run strictly in process.env.NODE_ENV === 'development'.

Self-Check Challenge

Write a useEffect subscription hook that properly cleans up an event listener when unmounted under Strict Mode.