DOM Element Not Removed After Animation

[mathewbyrne]

When animating out an unmounted element with Transition, the DOM elements are not removed after the animation.

Now unfortunately I cannot isolate and reproduce this issue. Here is a sandbox with an attempt to isolate, however the DOM elements are removed after the animation — https://codesandbox.io/s/oooxx0njl6

Here is the code snippet from the application:

<Transition
    native
    from={{ opacity: 0 }}
    enter={{ opacity: 1 }}
    leave={{ opacity: 0 }}
>
    {this.state.display &&
        (style => (
            <animated.div style={style}>
                <a onClick={() => this.setState({ displayBriefs: false })}>Back</a>
            </animated.div>
        ))}
</Transition>

And lastly here is an animation showing the issue from our application:

There look to be a few related issues, I've definitely seen #211 and #134 occurring with this setup. Seems similar to #43 which was resolved in a previous version.

We're using react-spring: ^5.6.9 and react: ^16.4.2.

[drcmda]

Are you 100% sure it uses react and especially react-dom 16.4.x (because that one has been the culprit in the past many times)?

If it's gDSFP indeed, i have asked the react team to please unpublish 16.3.x. Dan Abramov said the issue is too minor for that, since going to loose on unlublishing would take away from the seriousness of it. See: facebook/react#12898 (comment)

[mathewbyrne]

Ah thankyou, that was it we didn't have react-dom up to 16.4 alongside react. I missed #198 which looks like the same issue. Thanks again.

[gaearon]

I mean, we can’t unpublish 16.3 because it would completely break projects. We also can’t do that technically — I’m sure npm wouldn’t allow us to unpublish something that’s actively used.

We could deprecate 16.3. But it will be a pain for thousands of people who migrate minor by minor. They might decide to go back to 16.2 instead of pushing forward. That’s even worse.

So we’d rather have them upgrade to 16.3, and if they have issues, upgrade further. This period will pass.

You can test for React.version and display a message for all 16.3 releases. This won’t help with detecting ReactDOM version but can be close enough.

You can also set ^16.4.0 as your peer dependency to make Yarn/npm warm when earlier versions are used.

[drcmda]

@gaearon Hi Dan! Peer-dependencies should be set, i hope it warns users. I understand it's not really an option to un-publish, like you said, it will pass. I'll add a warning message in transition using React.version, this is a really good idea.