useEffect getting called twice in react v18

Viewed 6895

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.

1 Answers

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.

Related