⚡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(() => {
fetchUsers();
}, []);

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

TypeScript

const hasFetched = useRef(false);

useEffect(() => {
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

More 1-Min Fixs

Fix “Too Many Re-renders” Error in React

This error happens when your component keeps updating state inside render, causing an infinite loop.

Fix “map is not a function” Quickly

This usually happens when you think a value is an array, but it is actually undefined, null, or an object.

Add loading guard to stop duplicate API calls

One missing loading check can create duplicate records, double payments, or repeated requests.

⚡

Get a new 1-Min Fix in your inbox

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