[bug]: useTransition When uninstalling, double-clicking causes DOM destroy

[coderlzw-cn]

Which react-spring target are you using?

• [X] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

What version of react-spring are you using?

9.7.3

What's Wrong?

When exitBeforeEnter is set to true, double-click the button and instantly destroy the dom when it is hidden from reality

https://stackblitz.com/edit/stackblitz-starters-hh9ppv?file=src%2FApp.tsx

To Reproduce

When exitBeforeEnter is set to true, double-click the button and instantly destroy the dom when it is hidden from reality

Expected Behaviour

Is this a bug?

Link to repo

https://stackblitz.com/edit/stackblitz-starters-hh9ppv?file=src%2FApp.tsx

[branlok]

I had the same issue, So I added another state to check whether it is still animating or not. The bug occurs when you try to change the props while it is still animating.

    let [open, setOpen] = useState(false);
    let [animating, setAnimating] = useState(false);
    const transitions = useTransition(open, {
        from: { opacity: !open ? 1 : 0 },
        enter: { opacity: 1 },
        leave: { opacity: open ? 1 : 0 },
        config: { duration: 120 },
        exitBeforeEnter: true,
        onChange: () => { setAnimating(true) },
        onRest: () => { setAnimating(false) },

    })

Even though this is a fix, for me I realize i didn't need exitbeforeenter at all.

someone else had the same issue on https://github.com/pmndrs/react-spring/issues/1064#issuecomment-1200972581