question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Change in unmounting timing from React 15

See original GitHub issue

Do you want to request a feature or report a bug?

Question (could be a bug)

What is the current behavior?

In React 15 if you replace a component with another one, the old component has componentWillUnmount called before the new component has componentWillMount called. However, this has changed in React 16. Now the new component has componentWillMount called before the old component has had its componentWillUnmount called.

What is the expected behavior?

I would have expected that the React 15 behaviour would have been maintained. It seems strange to me that new components are starting to be mounted before an old component has unmounted.

React 15 example React 16 example

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
codrin-bytexcommented, Mar 27, 2018

According to the React 16.0 docs indeed this is not considered a bug. I’ve made a few changes on your initial React 16 example https://codesandbox.io/s/n3x14rr7yl

You can see that B.componentDidMount will be called after A.componentWillUnmount, which make sense… before mounting a new component React will “prepare” the new one.

Edit: This is why they also recommend to make API calls on componentDidMount. componentWillMount can be called multiple times in because fiber can suspend tasks and prioritise others.

0reactions
alexreardoncommented, Mar 28, 2018

Cheers @gaearon. It makes sense when looking at it like that. My intuition led me to expect otherwise.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React.Component
componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating ...
Read more >
How to unmount, unrender or remove a component, from itself ...
You can just unmount it conditionally. All you have to do is remove it from the DOM in order to unmount it. As...
Read more >
Journey from React 15 to React 16 | by Akash Verma - Medium
Moving to React 16 required additional time and as always we had time constraint. We released the product as per the deadline in...
Read more >
React Lifecycle - W3Schools
The three phases are: Mounting, Updating, and Unmounting. ... The constructor method is called, by React, every time you make a component:
Read more >
An Ultimate Guide to Upgrading to React 18 - OpenReplay Blog
With these changes, you can continue using the old API in React 17 mode ... to the effect of being mounted and unmounted...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found