v9 useTransition regressions

[aleclarson]

noticed a useTransition regression, my modal close animation stopped working after upgrading (it's now opening with animation and closing instantly on v9)

https://github.com/devhubapp/devhub/blob/6aa24bb96658ce2541f69f9eccfc3d65826c726b/packages/components/src/components/modals/ModalRenderer.tsx#L130-L172

Originally posted by @brunolemos in #642 (comment)

[aleclarson]

There seem to be regression/change of behavior with useTransition where values are cached by key. This is problematic for us because we use this mechanism to skip transitions by using the same key, but still need the new object to be propagated to the view.

Sample:

react-spring 8 - https://codesandbox.io/s/ly068v5x2q
react-spring 9 - https://codesandbox.io/s/434popoxyw

In both cases no animation is expected (correct as the key is always the same), however in v8 item holds newly propagated value whereas in v9 item holds value from previous render.

Is this intended change?

Originally posted by @Kukkimonsuta in #642 (comment)

[aleclarson]

Similar issue reported by @RafalFilipek on Twitter:
https://twitter.com/rafalfilipek/status/1146122279836880896

[m-rutter]

I just hit this issue while using the v9 beta-9.

Below is a fairly minimal example. In latest v8 the content will update after clicking the button. In v9 the content will not update because the item in the transition collection is a cached object from the first render.

I'm guessing its necessary to cache the items by key for when an item leaves, but I'm guessing that the cache doesn't get updated again after the first render.

import React, {useState} from 'react'
import { useTransition, animated} from "react-spring";

function Test() {
    const [items, setItems] = useState([{ id: 1, content: "some content" }]);

    console.log(items[0].content); // changes after pressing button

    const transitions = useTransition(items, (item) => item.id, {
        enter: { opacity: 1 },
        leave: { opacity: 0 },
        initial: { opacity: 0 }
    });

    const updateContent = () => {
        setItems([
            {
                id: 1,
                content: "some content, with even more content than before"
            }
        ]);
    };

    return (
        <>
            <button onClick={updateContent}>change content</button>
            {transitions.map(({ item, key, props }) => (
                <animated.div key={key} style={props}>
                    {item.content}
                </animated.div>
            ))}
        </>
    );
}

[aleclarson]

@m-rutter The item caching issue will be fixed when #750 is merged 👍

[brunolemos]

noticed a useTransition regression, my modal close animation stopped working after upgrading (it's now opening with animation and closing instantly on v9)

I've found that changing from reset: true to reset: false fixes this. Maybe this is the intended behavior and v8 is actually the one behaving incorrectly?

Nevertheless, I still can't upgrade to v9 because of other regressions. I might open issues for them.

[aleclarson]

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