Here’s the reproduction, it’s a plain create-react-app https://github.com/Prinzhorn/react-spring-will-unmount-bug/blob/master/src/App.js

Quick start

git clone git@github.com:Prinzhorn/react-spring-will-unmount-bug.git
cd react-spring-will-unmount-bug
npm i
npm start

Open your JavaScript console, run the example app and hit the button “Toggle Panel” twice. When the panel is closing you can see an endless loop of:

componentWillUnmount
componentDidMount
render
componentWillUnmount
componentDidMount
render
componentWillUnmount
componentDidMount
render
componentWillUnmount
componentDidMount
render

(it’s not actually endless, React will kill it after 1000 runs).

If you remove line 33 this.props.onDataChange('bar'); the endless loop is gone, however the lifecycle hooks are still not correct

render
componentWillUnmount <--- triggered when the animation starts
componentDidMount
componentWillUnmount <--- triggered when the animation ends with no render call in-between

Details

I have a side-panel in my app with some settings (text inputs and such). I want to save the changes once the panel is closed, that’s why I pass the updated data to a central store from inside componentWillUnmount. However, the panel(s) are controlled by a react-spring <Transition> which does weird things. The updated data will cause the <Transition> (or the containing component) to re-render but always with an empty array (since the panel is currently closing). But it is still causing the to-be-removed panel to be mounted/unmounted endlessly.