Why useEffect is running twice in React?

The useEffect is running twice in React on load why because, in strict mode, all components will mount and unmount and then be remounted. To prevent or avoid useEffect from running twice, disable strict mode in React by removing <React.StrictMode> component from the index.js file.

Let us explain this in detail.

In strict mode, with React version >= 18, the effects will be mounted, unmounted, and mounted again. This is not a major issue and it will only happen in development mode. In the production build the useEffect will run only once. It is not a problem with your javascript code.

Please look at the below App component to view the mounting, unmounting, and remounting stages.

import { useEffect } from 'react';

function App() {
	useEffect(()=>{
		console.log("App Component mounted");
		return (()=>{
			console.log("App Component unmounted");
		})
	}, [])
	return (
	  <div>
			Hello World!
	  </div>
	);
};
export default App;

Our console output will be like this:

App Component mounted
App Component unmounted
App Component mounted

The strict mode in React is an optional feature that helps us to catch common errors and other potential issues that may happen in the development stages.

How to avoid useEffect running twice

If you want to avoid useEffect running twice, you can turn off the strict mode by removing <React.StrictMode> from the index.js file as given below.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    // <React.StrictMode>
          <App />
    // </React.StrictMode>
);

reportWebVitals();

You can disable it in Next.js by adding the below option in the next.config.js file.

reactStrictMode: false

The <React.StrictMode> does not make any changes visible UI. But it will add some additional checks and warnings for its child components. So turning off React strict mode is not recommended.

Here are some reasons why strict mode is important in React:

1. Identifying potential problems: The strict mode shows warnings for potential problems like unsafe coding practices, usage of deprecated features, incorrect component usage, etc.
2. Enforcing best practices: It enforces best practices in React development. It ensures that the developers are following recommended guidelines to maintain code quality across the project.
3. Detecting Unexpected Side Effects: Due to the strict mode's twice invoking function routines, the functions can check their output to make sure it is pure and generates the correct side effects each time when it is invoked. If a side effect arises incorrectly during the function render process, it can be quickly identified and tracked down in the development stage.

Conclusion

The useEffect is running twice in React component due to the strict mode enabled by default in React version >= 18.  All components will mount, unmount, and then mount again when strict mode is enabled. Because of this, useEffect is called twice during load. This only happens in the development stage. If you want to disable strict mode in your React project, remove the <React.StrictMode> in index.js file.