React UseEffect() Rendering twice!

One of the strange behaviours I came across using useEffect().
let's go through the effect and then jump into the solution.
Here is a code below.

App.js

import React from 'react'
import { useEffect,useState } from 'react';
import './App.css';
import io from 'socket.io-client'

function App() {


  useEffect(()=>{
   console.log("hello from use effect");
  },[])

  return (
    <div>
  Hello world

    </div>

  );
}

export default App;

and index .js

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


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

This is a small code snippet where we are just showing "hello World" on the web page and there is a useeffect hook which prints
"hello from use effect". After running it on the development server you can see the print statement printing twice in the console.

The solution is to remove the React.strictMode
tag around the app. and this solves our multiple render issues associated with useEffect.

Thank you:)

Happy coding!