React StrictMode Guide

StrictMode helps catch bugs and prepare for future React features. Here's how to use it.

Basic Usage#

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

const root = createRoot(document.getElementById('root'));

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

// Can wrap specific parts
function App() {
  return (
    <div>
      <Header /> {/* Not in strict mode */}
      <StrictMode>
        <MainContent /> {/* In strict mode */}
      </StrictMode>
      <Footer /> {/* Not in strict mode */}
    </div>
  );
}

What StrictMode Does#

// 1. Double-invokes certain functions to detect side effects

function Component() {
  // Called twice in StrictMode during development
  console.log('Render');

  const [state, setState] = useState(() => {
    // Initializer called twice
    console.log('State initializer');
    return 0;
  });

  useEffect(() => {
    // Effect runs, then cleanup runs, then effect runs again
    console.log('Effect');
    return () => console.log('Cleanup');
  }, []);

  return <div>{state}</div>;
}

// Console output in StrictMode:
// Render
// Render
// State initializer
// State initializer
// Effect
// Cleanup
// Effect

Detecting Impure Renders#

// BAD: Side effect during render
let renderCount = 0;

function BadComponent() {
  renderCount++; // StrictMode will show this doubles
  return <div>Rendered {renderCount} times</div>;
}

// GOOD: Use state or refs
function GoodComponent() {
  const renderCount = useRef(0);

  useEffect(() => {
    renderCount.current++;
  });

  return <div>Rendered {renderCount.current} times</div>;
}

// BAD: Mutating objects during render
function BadMutation({ items }) {
  items.sort(); // Mutates prop!
  return <ul>{items.map(i => <li key={i}>{i}</li>)}</ul>;
}

// GOOD: Create new array
function GoodMutation({ items }) {
  const sorted = [...items].sort();
  return <ul>{sorted.map(i => <li key={i}>{i}</li>)}</ul>;
}

Effect Cleanup Testing#

// StrictMode mounts, unmounts, then remounts components
// This tests cleanup functions

// BAD: No cleanup
function BadSubscription() {
  useEffect(() => {
    const subscription = dataSource.subscribe(handleData);
    // Missing cleanup! StrictMode will show duplicate subscriptions
  }, []);

  return <div>...</div>;
}

// GOOD: Proper cleanup
function GoodSubscription() {
  useEffect(() => {
    const subscription = dataSource.subscribe(handleData);

    return () => {
      subscription.unsubscribe();
    };
  }, []);

  return <div>...</div>;
}

// BAD: Timer without cleanup
function BadTimer() {
  useEffect(() => {
    setInterval(() => {
      console.log('tick');
    }, 1000);
    // Memory leak! Multiple intervals in StrictMode
  }, []);

  return <div>...</div>;
}

// GOOD: Clear interval
function GoodTimer() {
  useEffect(() => {
    const id = setInterval(() => {
      console.log('tick');
    }, 1000);

    return () => clearInterval(id);
  }, []);

  return <div>...</div>;
}

Detecting Deprecated APIs#

// StrictMode warns about deprecated lifecycle methods

// Warning: componentWillMount is deprecated
class OldComponent extends React.Component {
  componentWillMount() {
    // Deprecated
  }

  componentWillReceiveProps(nextProps) {
    // Deprecated
  }

  componentWillUpdate(nextProps, nextState) {
    // Deprecated
  }
}

// Modern alternatives
class ModernComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {
    // Instead of componentWillReceiveProps
    return null;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Instead of componentWillUpdate
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // Use snapshot here
  }
}

Detecting Legacy Context#

// StrictMode warns about legacy context API

// OLD (deprecated)
class OldProvider extends React.Component {
  getChildContext() {
    return { theme: 'dark' };
  }
  // ...
}

// NEW
const ThemeContext = React.createContext('light');

function NewProvider({ children }) {
  return (
    <ThemeContext.Provider value="dark">
      {children}
    </ThemeContext.Provider>
  );
}

Common Issues and Fixes#

// Issue: Effect runs twice
// This is intentional! Fix your effect to handle this

// Issue: API called twice
function Component() {
  useEffect(() => {
    // This will be called twice in development
    fetchData();
  }, []);
}

// Fix: Use AbortController or ignore stale responses
function Component() {
  useEffect(() => {
    let ignore = false;

    async function fetchData() {
      const response = await fetch('/api/data');
      const data = await response.json();

      if (!ignore) {
        setData(data);
      }
    }

    fetchData();

    return () => {
      ignore = true;
    };
  }, []);
}

// Or with AbortController
function Component() {
  useEffect(() => {
    const controller = new AbortController();

    fetch('/api/data', { signal: controller.signal })
      .then(res => res.json())
      .then(setData)
      .catch(err => {
        if (err.name !== 'AbortError') {
          setError(err);
        }
      });

    return () => controller.abort();
  }, []);
}

State Initialization#

// StrictMode calls initializers twice

// BAD: Side effect in initializer
function BadInitializer() {
  const [data] = useState(() => {
    // This runs twice!
    localStorage.setItem('initialized', 'true');
    return loadFromStorage();
  });
}

// GOOD: Pure initializer
function GoodInitializer() {
  const [data, setData] = useState(() => {
    // Just read, don't write
    return localStorage.getItem('data') || defaultData;
  });

  useEffect(() => {
    // Side effects in useEffect
    localStorage.setItem('initialized', 'true');
  }, []);
}

// BAD: Mutating during initialization
function BadMutation() {
  const [items] = useState(() => {
    const cached = cache.get('items');
    cached.lastAccessed = Date.now(); // Mutation!
    return cached;
  });
}

// GOOD: Return new object
function GoodInit() {
  const [items] = useState(() => {
    const cached = cache.get('items');
    return {
      ...cached,
      lastAccessed: Date.now(),
    };
  });
}

Production Behavior#

// StrictMode only affects development

// In development:
// - Double renders
// - Double effect invocations
// - Deprecation warnings

// In production:
// - No double rendering
// - Normal effect behavior
// - No warnings

// StrictMode has no runtime cost in production
// It's stripped out during build

Best Practices#

Enable StrictMode:
✓ Wrap entire app for new projects
✓ Enable for new features
✓ Address warnings before shipping
✓ Use for migration to newer React

Fix Common Issues:
✓ Add cleanup to all effects
✓ Make renders pure
✓ Use AbortController for fetches
✓ Avoid side effects in initializers

Testing:
✓ Test that effects handle remounting
✓ Verify subscriptions clean up
✓ Check for memory leaks
✓ Test with concurrent features

Avoid:
✗ Disabling to hide warnings
✗ Side effects during render
✗ Relying on effect timing
✗ Ignoring deprecation warnings

StrictMode is essential for catching bugs and preparing for React's concurrent features. The double-invoking behavior helps find missing cleanups and impure renders. Always enable StrictMode during development and address all warnings before production.