Why is my React useEffect Hook running twice on page load?

[rohan0maske-sys]

Summary

I am building a Next.js / React application, and I have a useEffect hook that fetches data from an API when the component mounts using the empty dependency array [].

However, when I look at my console logs, I can see that the fetch request is firing two times instead of just once whenever I load the page.

Is this a bug in React, or am I doing something wrong with my hook?

Additional information

No response

Example

No response

[rohan-xtha]

This is actually the intended behavior in React 18 when you are in development mode!

React automatically wraps your application in <React.StrictMode>. In development, Strict Mode unmounts and remounts every component automatically whenever it is rendered for the first time. This is done on purpose to help you find bugs related to side effects and to ensure your useEffect cleanup functions are working properly.

How to handle it:

Option 1 (Recommended): Add a cleanup function Make sure your effect cleans up after itself (e.g., aborting a fetch request):

javascript
useEffect(() => {
const controller = new AbortController();

fetch('/api/data', { signal: controller.signal })
.then(res => res.json())
.then(data => console.log(data));

return () => controller.abort(); // Cleanup
}, []);
Option 2: Disable Strict Mode (Not Recommended) If you are using Next.js and really want to turn this off, you can open next.config.js and set reactStrictMode: false.

Note: The double execution only happens in development. When you build and deploy to production, the useEffect will only run once!

[icyJoseph]

While the answer is somewhat correct. This does look like suspicious, non-authentic activity. Keep it easy with the AI and the spamming please. Same for, #91204.