useTransition throwing error after attempting to fix memory leak

[ilituchy]

Issue

Using react V8, I was having a memory leak in my useTransition animations - note - the animations were working, but would timeout after a while. This is an issue I've seen people talk about, and seems to be resolved by installing react-spring@next. I've made that installation, but am facing similar issues to #923. While it seems like it is resolved for them, I am still unable to use useTransition successfully. I attempted to switch to those specific canary versions mentioned in that issue with no luck.

I am wondering if useTransition has been altered so that I am now incorrectly using it. I noticed this issue #809 with updates, but wasn't able to successfully fix the issue.

Error

Currently I am getting this error, with the same code used previously before upgrading react-spring that worked, but with a memory leak.

Expected Behavior

This animation works smoothly without a memory leak.

Reproducible code

const images = [
  {
    key=1,
    url = "url1",
  },
  {
     key=2,
     url = "url2",
  },
  {
    key=3,
    url = "url3",
  },
  { 
    key=4,
    url = "url4",
  },
];

 const [slide, setSlide] = useState(0);

  useEffect(() => {
      const interval = setInterval(() => {
        setSlide(state => (state + 1) % images.length);
      }, 4000);
      return () => clearInterval(interval);
  }, []);

  const transitions = useTransition(images[slide], item => item.key, {
    from: {
      x: 1,
    },
    enter: {
      x: 1,
    },
    leave: {
      x: 0,
    },
    unique: true,
    config: { duration: 800 },
  });

{transitions.map(({ item, props, key }, index) => {
          return (
            <animated.div
              style={{
                height: 715,
                transform: interpolate([props.x], v => `scaleY(${v})`),
                transformOrigin: 'top',
                overflow: 'hidden',
                position: marginal && item.order === slide ? 'absolute' : 'relative',
                zIndex: item.order === slide ? -1 : 1,
                top: 0,
                width: useDesk ? (item.order === slide ? '100%' : '100.1%') : '100%',
                right: useDesk ? (item.order === slide ? 0 : 1) : 0,
              }}
              className="slider"
              key={key}
            >
              <animated.div
                style={{
                  transformOrigin: 'top',
                  transform: interpolate([props.x], v => `scaleY(${1 / v})`),
                }}
              >
                <img src="item.url">
              </animated.div>
            </animated.div>
          );
        })
        }

The animation itself is complex, but was working previously.

Environment

[email protected]
[email protected]

[aleclarson]

• The 2nd argument of useTransition was moved to the keys prop, alongside from, enter, leave, etc.
• The return value is now a function. (see the first example in feat: useTransition rewrite #809)