Lifecycle methods getting executed twice in react js

Viewed 415

I m just trying to see the order of execution of lifecycle methods, but I find Logs in console 2 times. I m wondering if constructor,getDerivedStateFromProps,render methods are executed twice, but componentDidMount is executed only once.

I just created a component, called all life cycle methods with console, I m including this component in App.js .

But I tried executing the same code in online editor https://repl.it/repls/ProbableLinedSpof Here I m getting the proper output(same code in executed even here)

Someone please help with the fix.

enter image description here

enter image description here

2 Answers

I encountered the same problem. Lifecycle methods will be fired multiple times if the application is running in StrictMode. Search for this keyword in your project, you should find a React.StrictMode tag. Remove it. This will solve the problem. Credit for this goes to @ericgio in your comments sections.

Removing React.StrictMode in src/index.js will resolve this issue.

Related