React 18 Strict Mode Double-Fires useEffect to Catch Real Cleanup Bugs
A development team discovered duplicate database records after a POST request inside a useEffect hook fired twice on every page load. The cause was React 18's Strict Mode, which deliberately mounts, unmounts, and remounts components in development to expose effects that lack proper cleanup. The duplicate-insert bug was already present in production code, where it could have surfaced unpredictably as a race condition rather than a consistent, reproducible pattern. The correct fix involves both adding a cleanup function to handle remounting safely and making side effects with real-world consequences idempotent or explicitly guarded against double execution. The team recommends keeping Strict Mode enabled across all environments, including staging, as it provides automatic, zero-cost testing of effect cleanup behavior on every page load.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.


Discussion (0)
Log in to join the discussion and vote.
Log in