useEffect getting called twice in react v18 [duplicate]

Question

This question already has answers here:

Why useEffect running twice and how to handle it well in React? (6 answers)

Why is my React component is rendering twice? (14 answers)

Closed 3 years ago.

The community reviewed whether to reopen this question 3 years ago and left it closed:

Original close reason(s) were not resolved

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.

That's what's supposed to happen: reactjs.org/blog/2022/03/29/… — jonrsharpe
– jonrsharpe, Commented Apr 13, 2022 at 11:33
for me , it's run only once. maybe something else trigger another rendering... codesandbox.io/s/festive-shamir-s8tj7z?file=/src/App.js — yanir midler
– yanir midler, Commented Apr 13, 2022 at 12:41
for me also this happening exactly but by removing react strict mode in index.js issue cleared but why this happening in this project last created project not react like this @jonrsharpe thanks for for sharing — Hari Prasath S
– Hari Prasath S, Commented Apr 20, 2022 at 4:08

Anubhav Gupta · Accepted Answer · 2022-04-13 11:34:50Z

2

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.

answered Apr 13, 2022 at 11:34

Anubhav Gupta

2121 gold badge2 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CS Alam Over a year ago

const isMounted = useRef(); useEffect(() => { if (!isMounted.current) return; isMounted.current = true; // ...rest of your code goes here... },[])

Youssouf Oumar Over a year ago

Removing StrictMode is the last thing to do. For a more detailed answer, see stackoverflow.com/questions/72238175/…

Collectives™ on Stack Overflow

useEffect getting called twice in react v18 [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related