What is React.StrictMode double invocation?

Answer

In React Strict Mode (development only), React intentionally invokes certain functions twice to help detect side effects in rendering. This includes: render functions, function component bodies, state initializers, and effect setup/cleanup pairs. The purpose is to surface bugs caused by components that are not "pure" — they produce different results on each invocation or have side effects during rendering. Since React's concurrent features may invoke render functions multiple times, your component body must be pure (no side effects during render). Effect double-invocation (React 18): effects also run twice in Strict Mode — mount → effect runs → cleanup runs → effect runs again. This detects effects that do not properly clean up. Example: if you open a WebSocket connection in useEffect but forget to close it in cleanup, you will see two connections in Strict Mode — revealing the bug. The double invocation behavior is ONLY in development and ONLY with Strict Mode. If your component behaves incorrectly with double invocations, it has a real bug that will manifest in production with concurrent rendering.