⚡1-Min FixIntermediateReact / Next.js

Fix API Calls Running Twice in React Strict Mode

April 26, 2026~1 min read

⚡TL;DR

React Strict Mode can call effects twice in development. Add a guard or make your API action idempotent.

If your API call runs twice only in development, React Strict Mode may be the reason.

TypeScript

useEffect(() =&gt; {
fetchUsers();
}, []);

In development, React may intentionally run this twice to detect unsafe side effects.

TypeScript

const hasFetched = useRef(false);

useEffect(() =&gt; {
if (hasFetched.current) return;
hasFetched.current = true;

fetchUsers();
}, []);

Better backend rule:
Never depend only on frontend prevention. For create/payment/save APIs, make the backend idempotent too.

ReactNextjsuseEffectApiStrict Mode

⚡

Get a new 1-Min Fix in your inbox

Subscribe to Stack Dev Life — free, no spam, unsubscribe anytime.