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() }, []) ```

a9d40852-b7cd-4484-9ffe-04d424a78521