Why does useEffect run twice when my component mounts?

Question

My API call fires twice in development and I see two requests in the network tab.

```jsx
useEffect(() => {
  fetch('/api/profile').then(r => r.json()).then(setProfile);
}, []);
```

Is this a bug in my code?

Priya Sharma · Accepted Answer

Not a bug. In development, React 18+ **Strict Mode** mounts, unmounts and mounts again to surface missing cleanups. It doesn't happen in production.

Add a cleanup that ignores the stale result:

```jsx
useEffect(() => {
  let active = true;
  fetch('/api/profile').then(r => r.json()).then(d => active && setProfile(d));
  return () => { active = false; };
}, []);
```

Better still, use a data library like TanStack Query, which dedupes the request for you.

Pooja Bansal · Answer

I had the same thing last week. You can also check `reactStrictMode` in next.config if you're on Next.js, but don't turn it off just to hide this.

Why does useEffect run twice when my component mounts?

2 Answers

Log in to view all 2 Answers