Change in unmounting timing from React 15
See original GitHub issueDo 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.
Issue Analytics
- State:
- Created 5 years ago
- Comments:6 (1 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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/n3x14rr7ylYou can see that
B.componentDidMount
will be called afterA.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.Cheers @gaearon. It makes sense when looking at it like that. My intuition led me to expect otherwise.