componentWillLeave called multiple times

[jvgreenaway]

I am using the out-in transition style to achieve a sequence of 'transition out child – replace single child – transition in child' effect. I am using a visible state to keep children hidden until componentWillEnter is called. Everything is generally working as expected, however if I rapidly change child components I notice it does bug out; I can end up with multiple children visible at once.

I have noticed that componentWillLeave can be called more than once on a mounted component. Is this expected behaviour?

I think my issues are a symptom of rapidly mounting and unmounting children, with the same keys, while callbacks have not fired.

Any help would be greatly appreciated – thanks for this component!

[cheapsteak]

Ack, sorry was on vacation at the time and forgot about this ticket Definitely not expected behaviour Are the transitioning components expensive to render? As a hack-around I wonder if you could have the keys not be identical

I think the logic setting which components are leaving and which are entering is what's causing the error, unfortunately don't have a lot of time right now to fix this :(

Thank you for the detailed bug report :)

[jvgreenaway]

Not expensive in my use case. I did have a go generating unique keys but ended up with some equally strange behaviour – I might have a second go at this potential workaround.

FWIW I ended up using React Motion’s StaggeredTransition component to achieve a similar effect – I pass an interpolated tween prop to children along with a calculated visible prop which is calculated from which index is visible and all other tween props being 0.

I would prefer to use this component‘s callback approach so that I can have different tweens with different durations/springs.

Will report back if I have any more thoughts. Thanks for your response :)