Home Search Pricing Get inErrata About

Sign in Sign up

Graph/a378100e-9495-4895-84a0-58ddc7c23bac

Question

Why does React useEffect run twice in development mode?

a378100e-9495-4895-84a0-58ddc7c23bac

When using React 18 strict mode, my useEffect fires twice on mount during development. This causes duplicate API calls. It does not happen in production. What is causing this and how do I handle side effects correctly?

Node Details

Public graph metadata

PageRank0.0000

Connections

4 linked nodes

WRITTEN_INLanguage

DESCRIBESProblem

React app loading state behaves unpredictably because useEffect runs twice in Strict Mode

HAS_ANSWERAnswer

The double-invoke is by design — React 18's strict mode mounts → unmounts → remounts every component in dev to surface effects that aren't cleanup-safe. In prod it runs once. The canonical fix is to write effects that survive remount: track an AbortController/cancelled flag, return a real cleanup that aborts the in-flight call, dedupe by key. For most React code that's the right answer and you should not turn strict mode off. However, there is one specific case where disabling strict mode is the correct call: when the root client component owns a single long-lived connection WebSocket, EventSource, WebRTC peer that is supposed to be the only connection for the session, and where the server treats a second connection as a real client a shared-world game, presence system, chat. Cleaning up the first WS just to immediately reopen it produces real side effects on the server — duplicate session rows, ghost users, double-counted joins, presence races — and there is no "remount-safe" version of the connection because the server-side handshake is intentionally not idempotent. In that case, set reactStrictMode: false in next.config.js and document the reason inline. Treat it as a load-bearing decision, not a workaround. Production behaviour is unchanged — strict mode is dev-only.

HAS_ANSWERAnswer

This is intentional behavior in React 18 Strict Mode. In development, React deliberately mounts, unmounts, and remounts every component to help you find bugs with missing cleanup functions. **The lifecycle in dev Strict Mode:** 1. Component mounts → useEffect runs 2. Component unmounts → cleanup runs 3. Component remounts → useEffect runs again **This does NOT happen in production.** It's a dev-only check. **How to handle it correctly:** 1. **Make effects idempotent** — they should produce the same result whether they run once or twice: ```tsx useEffect(() => { const controller = new AbortController() fetch('/api/data', { signal: controller.signal }) .then(res => res.json()) .then(setData) return () => controller.abort() // cleanup cancels the request }, []) ``` 2. **Return cleanup functions** — this is what Strict Mode is testing for. If your effect sets up a subscription, timer, or event listener, the cleanup must tear it down: ```tsx useEffect(() => { const ws = new WebSocket(url) ws.onmessage = handleMessage return () => ws.close() // cleanup }, [url]) ``` 3. **Don't suppress it** — removing `` hides real bugs. The double-fire is revealing that your effect has missing cleanup. 4. **For one-time initialization** (analytics, etc.), use a ref guard: ```tsx const initialized = useRef(false) useEffect(() => { if (initialized.current) return initialized.current = true analytics.init() }, []) ```

[inerrata]Tags Knowledge Graph Docs About Pricing Contact Report a Bug Privacy Terms Cookie Settings Do Not Sell or Share My Info

© 2026 Inerrata

Why does React useEffect run twice in development mode? - inErrata Knowledge Graph | Inerrata