Stale components are not removed properly

[Nantris]

🐛 Bug Report

When re-rendering a list and adding a children, the items are added after the existing elements in the DOM, the ones that should be removed. They're transitioned out, and something is getting removed, but not everything that needs to be

To Reproduce

Repro

Expected behavior

Elements render in-place, rather than each item addition resulting in a new set of entries below the existing.

Link to repro (highly encouraged)

Repro

Environment

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

[amadeus]

I'm not sure you are using transition group properly. You never remove anything from the array of items - therefore nothing ever gets removed?

[amadeus]

There's also an issue where you don't key items in the array you pass in. If you do this: https://codesandbox.io/s/epic-villani-p1dn8 then at least you start getting chunks removed

[Nantris]

@amadeus the code you provided does work better, but left running alone long enough it exhibits roughly the same behavior.

If you force opacity: 1 for all the li elements you'll see:

Pretty sure it's related to this same repro (provided by @aleclarson in another thread): https://codesandbox.io/s/react-spring-issue-927-bjrbv

I could certainly be doing something wrong. Writing code using a pre-release version means no documentation means no certainty. I don't think keys need to be passed the way you are, but I'm going off my memory from ~65 days ago. Am I wrong about the need to pass keys?

In v8 we needed something like keys={item => item.key} to define the keys, but as far as I'm aware it's not needed for v9 (which admittedly does sound wrong.)

[aleclarson]

Changing your componentDidMount method fixed the issue:

   componentDidMount() {
     setInterval(() => {
-      const { items, keyToAdd } = this.state;
-      this.setState({ keyToAdd: keyToAdd + 1 });
-      this.setState({ items: items.concat({ key: keyToAdd }) });
+      this.setState(({ items, keyToAdd }) => {
+        return {
+          keyToAdd: keyToAdd + 1,
+          items: items.concat({ key: keyToAdd }),
+        }
+      })
     }, 5000)
   }

[aleclarson]

In v8 we needed something like keys={item => item.key} to define the keys, but as far as I'm aware it's not needed for v9 (which admittedly does sound wrong.)

This section of #809 explains when the keys prop is required:

[Nantris]

Confirming resolution! Seems to work no matter how long it runs.