React-spring: `useTransition` items not unmounting in React v16.8

Created on 6 Feb 2019  路  9Comments  路  Source: pmndrs/react-spring

Seems like useTransition is broken by the latest version of React

16.8.0
https://codesandbox.io/s/8y8n5q67l

16.8.0-alpha.1
https://codesandbox.io/s/j7659151y3

Most helpful comment

published the fix

All 9 comments

hum, looks like some react hook changed behaviour in between the two versions. need to investigate ...

Seems like a bug in React unfortunately. The transition doesn't do anything wrong, it catches the "false" in the end and renders nothing, but React refuses to let the node go. @gaearon

here's a version that logs the render pass: https://codesandbox.io/s/vjp41lkrrl

Yep facing this as well.

I noticed the dom does get removed, but only in the next render phase: https://codesandbox.io/s/o5vn7z0l66

And it also happens on react native, so the issue is not with react-dom.

Maybe react-spring now needs to trigger a new render or something like that?
Might be related with react now bailing out of re-renders with things are equal based on Object.is.

gif

I think I found the issue, let me try a fix.

@drcmda you can't do this anymore to trigger a rerender: useState()[1](). React now bails out of re-rendering when the value is the same.

You are doing this on lot's of files: https://github.com/react-spring/react-spring/blob/5ac0ad2eda7c055ac54beaacf55c1be4a8b437a0/src/renderprops/hooks/useTransition.js#L144

Do something like this:

const [, _forceUpdate] = useState(false)
const forceUpdate = _forceUpdate(v => !v)

Is this official?

@drcmda yes it's a breaking change, they mentioned in the release notes and in the blog:

image

good find! i'll update it

published the fix

Was this page helpful?
0 / 5 - 0 ratings