DEV Community

saurav RT
saurav RT

Posted on

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.


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

function App() {

   console.log("hello from use effect");

  return (
  Hello world



export default App;
Enter fullscreen mode Exit fullscreen mode

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'));
    <App />

Enter fullscreen mode Exit fullscreen mode

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.

Image description

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!

Top comments (0)