useTransition component does not unmount

[xuan0123]

🐛 Bug Report

const [canShow, setCanShow] = useState(false)

const trans = useTransition(canShow, {
  from: { opacity: 0 },
  enter: { opacity: 1 },
  leave: { opacity: 0 },
})

const showAndHideQuickly = async () => {
  setCanShow(true)
  await Promise.resolve()
  setCanShow(false)
}

return (
  <>
    <button onClick={showAndHideQuickly}>Show and hide</button>
    {trans((style, item) => item && <animated.div style={style} />)}
  </>
)

If I change the state ( first argument of useTransition ) from false to true, the component will mount. And I change the state back to false quickly, the component will not unmount.

If the from and leave are different, the component will unmount when the state is false.

To Reproduce

https://codesandbox.io/s/react-spring-bug-m23ir?file=/src/App.js

Expected behavior

the mounting and unmounting should follow the state.

Link to repro (highly encouraged)

https://codesandbox.io/s/react-spring-bug-m23ir?file=/src/App.js

Environment

• react-spring v9.0.0-rc.3
• react v16.13.1

[ShiiRochi]

@xuan0123 try to change the following part:

const trans = useTransition(canShow, {
  from: { opacity: 0 },
  enter: { opacity: 1 },
  leave: { opacity: 0 },
})

To something like that:

const trans = useTransition(canShow ? [1] : [], {
  // adding a key, transition will apply styles correctly if you toggle elements visibility quickly
  key: item => item,
  from: { opacity: 0 },
  enter: { opacity: 1 },
  leave: { opacity: 0 },
})

And try to remove item &&.

[ShiiRochi]

I had a problem when the modal's dimmer was entering the page slowly, but its disappearing was immediate and at the same time component was not unmounted, instead, it just had only a CSS class with display: none, that was afterward overridden using transition provided styles.

I think this case, that false is considered to be a value, could have some logic below: false as well as true is also some kind of a valid value. So...for simple transitions for a single component between visible/hidden states a single-value array can be used.

[joshuaellis]

closing due to inactivity. please use discussions or discord if you want more help or please consider creating a PR if you want to add a feature 😄

[danielberndt]

@joshuaellis thanks for taking care of pruning the issues ❤️

This bug is still very much alive though and it's leading to quite a few bugs in our application due to components not properly unmounting.

[joshuaellis]

Hey @danielberndt thank you for reaching out, I'll be honest with you, as maintainers we're incredibly stretched right now. I appreciate OSS isn't everyone's cup of tea, but we'd really appreciate it if your company could dedicate some resource time to fix this bug.

I will reopen and add to the list, but tbh the list is long! 😂

[joshuaellis]

I think this issue might be resolved – https://codesandbox.io/s/react-spring-bug-forked-okmlm?file=/src/App.js

If it's not please provide a new reproduction of the issue and we can reopen 👍🏼