useTransition item value doesn't update in v9 if key stays the same

[lucaschen]

🐛 Bug Report

If I keep the same key, the value of the item for useTransition no longer gets updated.

This may be the expected behaviour, but it did not work this way in v8, and I am wondering how I can get around this issue.

To Reproduce (CodeSandbox below)

I have code like the following:

const [stateObj, setStateObj] = useState({
  isDetailsOpen: false,
  someData: []
});
const transitions = useTransition(stateObj, obj => obj.isDetailsOpen, {
  enter: { opacity: 1 },
  from: { opacity: 0 },
  leave: { opacity: 0 }
});

// later...
{transitions.map(({ item, key, props }) => {
  return (
    item.isDetailsOpen && (
      <animated.div key={key} style={props}>
        <pre>{JSON.stringify(item.someData)}</pre>
      </animated.div>
    )
  );
})}

I do a state update like so:

setStateObj({
  isDetailsOpen: true,
  someData: [1]
});

And later a state update like so:

setStateObj({
  isDetailsOpen: true,
  someData: [2]
});

And finally a state update like so:

setStateObj({
  isDetailsOpen: false,
  someData: []
});

Expected behavior

1. First state update should cause [1] to fade in.
2. Second state update should change [1] to [2] - no fade.
3. Third state update should cause [2] to fade out - it should not change to [].

This works perfectly in 8.0.27, but breaks in any of the major version 9s.

Link to repo

https://codesandbox.io/s/awesome-feistel-pmtrr

Change the react-spring version on the left to see for yourself.

I'm guessing that this is not a bug, but rather a change to how useTransition works. I couldn't find anything in the docs on this - please enlighten me if I can write my code in a better way.

[aleclarson]

Please try with the latest canary. 👍

You'll need to update your useTransition calls slightly. See #809

[lucaschen]

I see. Thanks for the heads up!

My switch to v9 is mostly an attempt to get testing working - I'm trying to figure out a way to instantly complete an animation so I can test appropriate DOM additions/removals using React Testing Library. Do you have any suggestions regarding this?

[aleclarson]

In v9+:

import { Globals } from 'react-spring'

beforeAll(() => {
  Globals.assign({
    skipAnimation: true,
  })
})

[aleclarson]

Now available in v9.0.0-rc.2 #985