React-spring: items is not defined - when passing an array of items to <Transition />

[Slapbox]

🐛 Bug Report

items is not defined

To Reproduce

Unknown how _exactly_ to reproduce

Expected behavior

<Transition /> recognizes valid items passed to it

Link to repro (highly encouraged)

Unknown how to reproduce

Environment

• react-spring v9.0.0-808.17
• react v16.12.0

Additional Info

2210 proves not to match perfectly to the actual file on the filesystem. The actual code on at the point of failure is:

Variables at time of failure:

[Slapbox]

@aleclarson any thoughts on this one? I'd love to include react-spring in our upcoming release. I'm hoping!

[aleclarson]

I won't be publishing another canary for a few weeks at least. Too busy atm.

You can use patch-package to temporarily fix the useTransition hook with a git patch. Just change the items and children references to props.items and props.children.

PS: You can become my patron to support my work.

[Slapbox]

@aleclarson I understand. Thanks for all your hard work and for the tip.

The values actually need to be _ref3.items and _ref3.children since props doesn't contain those values. Doing this may be the cause of the issues below though.

When I do make that change I just get piles of these warnings, and I believe infinitely looping items being inserted into the DOM, though I can't inspect because of the infinite loop.

Looking forward to trying the next release whenever it's available.

[aleclarson]

When I do make that change I just get piles of these warnings, and I believe infinitely looping items being inserted into the DOM, though I can't inspect because of the infinite loop.

What does your <Transition> usage look like? Can you reproduce with useTransition too?

[Slapbox]

That gets me TypeError: transitions.map is not a function

I tried to implement hooks based on the from the example in the docs, but I don't know if maybe the API has changed?

After inspecting I realized that transitions is now returning a function so I tried return transitions; instead of return transitions.map(...), and there's no error, elements are rendered, but sadly there's no animations, and no delay to indicate that React-Spring thinks it's processing animations. In some older versions items would be delayed from appearing/disappearing in accord with the chosen duration, but in this case the items are appear/disappear as soon as the props are updated.

I set a duration of 5000 to make it easier to test, but I'm not sure that I've followed the v9 API correctly since I don't have a reference.

const ListRenderer = props => {

  const fromLeave  = {
    opacity: 0,
  };
  const enter = {
    opacity: 1,
  };

  const [items, set] = useState(props.items);

  const transitions = useTransition(items, item => item.key, {
    enter,
    from: fromLeave,
    leave: fromLeave,
    config: { duration: 5000 },
  });

  return transitions.map(({ item, animatedProps, key }) => (
    <animated.div key={key} style={animatedProps}>
      {item}
    </animated.div>
  ));
};

[aleclarson]

808.17 has the new useTransition API (see #809)

Also, make sure your enter.transform value keeps the rem unit in the middle, since that's what you're doing elsewhere.

[Slapbox]

Hey @aleclarson thanks for your speedy reply and for pointing me to the API notes!

I simplified my example and implemented the new API. Unfortunately I'm getting identical results, items display, but no delay or animation occurs. The new API is really sleek (nice work!) - so I don't think I've screwed anything up. Is there anything I'm doing wrong here, or is this a bug?

const ListRenderer = props => {
  const initial = {
    opacity: 0,
  };
  const fromProp = {
    opacity: 0,
  };
  const leave = {
    opacity: 0,
  };
  const enter = {
    opacity: 1,
  };

  const [items, set] = useState(props.items);
  const transition = useTransition(items, {
    initial,
    from: fromProp,
    enter,
    leave,
    config: { duration: 10000 },
  });

  return transition((values, item) => (
    <animated.div style={values}>{item}</animated.div>
  ));
};

[aleclarson]

Is there anything I'm doing wrong here, or is this a bug?

Hard to say. Can you make a git repo with a lockfile and push it to Github?

This useTransition example works fine with 808.17:
https://codesandbox.io/s/react-spring-issue-927-bjrbv

[Slapbox]

Hey @aleclarson - between time constraints and proprietary code, I _probably_ can, but not in a timely manner; it would have to be a repro, not the original code.

I actually screwed up earlier and all the elements I was seeing were rendered outside of react-spring. React-Spring renders nothing at all

Is there any reason to think that maybe the issue comes from passing React components as children instead of just arrays of numbers?

---

Also, I left https://codesandbox.io/s/react-spring-issue-927-bjrbv running, not really intentionally, but I noticed it has broken down in that time.

The list has at least 263 items currently, almost all of them stuck on their way out, it seems.

[Slapbox]

Seems that useState returns an empty array for items if you pass it an array of React components. This is my first time trying to use useState for this purpose, so I assume this isn't unusual and that it's the issue here.

It works fine if I pass it simply objects to render a number, like in your example, but fails if I want to render React components as children because of useState. Is there any way to do this? The same general concept worked very nicely in 8.x using the render-props API.

[Slapbox]

Managed to get it working with hooks. #922 remains a showstopper unfortunately.

[Slapbox]

To clarify why this issue is not closed, although we got it working with the hook API, we didn't get it working with the class-based version.

[aleclarson]

This will be fixed in the next version (9.0.0-canary.808.18). 👍