How do I use useSprings with a dynamic items array?

[juniorforlife]

I want to implement something like the cards stack example
But instead of having a fixed array of items, it's a state. Whenever a card is swiped off, I will set state to remove that card from the array.
Further more, I want to implement lazy loading where I only show 10 cards, then load 10 more as users reaches the end.
How do I achieve this with useSprings? Does useSprings know the array has changed and create new springs value accordingly?

[grifdail]

In your case, i would put the spring on the component of the card itself? The setState callback can be passed to the children.

[myznikovgleb]

I agree with @grifdail. Since cards has not been interacting with each other, it would be better to just add useSpring hook to the card component

If you decide to work with useSprings hook, I'll recommend to get more familiar with deps parameter. You can start with docs

I also slightly transform an example from the link above to fit described cards features

import { useSprings, animated } from '@react-spring/web';
import { useEffect, useState } from 'react';

import { fetchCards } from '';

function MyComponent() {
  // State for cards
  const [cards, setCards] = useState([]);

  const [springs, api] = useSprings(
    cards.length,
    () => ({
      from: { opacity: 0 },
      to: { opacity: 1 },
    }),
    [cards],
  );

  // Lazy load feature
  useEffect(() => {
    if (cards.length === 0) {
      setCards(fetchCards());
    }
  }, [cards]);

  // Remove feature
  const onRemove = (index) => {
    setCards((prevCards) => [
      ...prevCards.slice(0, index),
      ...prevCards.slice(index + 1),
    ]);
  };

  return (
    <div>
      {springs.map((props) => (
        <animated.div style={props}>Hello World</animated.div>
      ))}
    </div>
  );
}