CODEWITHSUNDEEP
reactjs
Akshay B M
Akshay B M

Reputation: 51

Lifecycle methods getting executed twice in react js

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

Upvotes: 5

Views: 744

Answers (3)

Sagarika Nangia
Sagarika Nangia

Reputation: 61

In development mode, React intentionally invokes certain lifecycle methods twice to help identify side effects. This double invocation ensures that any side effects operations (operations outside the scope of the function that can affect other components or variables) are likely to be detected.

Upvotes: 0

Srinivasan N
Srinivasan N

Reputation: 683

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

Upvotes: 2

RoshanJha
RoshanJha

Reputation: 61

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.

Upvotes: 6

Related Questions