'useEffect getting called twice in react v18 [duplicate]

I created an all-new react app to test this myself because one of my friend was facing this issue. App.js code ->

function App() {

  useEffect(() => {
    console.log('on init gets called');
  }, []);

  return (
    <>
      Hello my first react app      
    </>
  );
}

export default App;

There is no other component present in the app. Following is the index.js code ->

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

console.log present in useEffect gets printed twice when we load the application for the first time. I want it to be printed only once.



Solution 1:[1]

A tweak that worked for me -> Removed strict mode of react and it works normally. Not sure if there can be other solutions to this or why it was happening.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Anubhav Gupta