react-spring : Transition component issue

Question

I am using react-spring, Transition render prop component.

I am facing an edge case where even after the items are updated via setState() the items used in component shows the old values and appends new values to it.

I was expecting a behaviour where the items should re-render the list of items in Transition component.

any idea what I might be missing?

<ul>
  <Transition
    items={randomFeeds}
    // keys={randomFeeds.map(item  => item.id)}
    keys={randomFeeds => randomFeeds.id}
    from={{ transform: 'translate3d(0, -40px, 0)', opacity: 0 }}
    enter={{ transform: 'translate3d(0,0,0)', opacity: 1 }}
    update={{ transform: 'translate3d(0,0,0)', opacity: 1 }}
    reset={true}
    unique={true}
  >
    {item => props => (
      <li style={props} key={item.id + item.riskCategoryId + item.riskCategory}>
        <RimeCard
          key={item.id + item.riskCategoryId + item.riskCategory}
          title={item.title}
          categoryId={item.riskCategoryId}
          category={item.riskCategory}
          link={item.link}
          isTimeline={true}
          date={item.publishDateString}
        />
      </li>
    )}
  </Transition>
</ul>

Answer 1

If you want an item update then make sure that, the key of your li component is not changed between updates. So instead of using key: key={item.id + item.riskCategoryId + item.riskCategory} just use key={item.id}

And you may also want to add the leave property to your Transition for example: leave={{ transform: 'translate3d(0, 40px, 0)', opacity: 0 }}

And if this solve your problem I'm not sure if reaset and unique is neccessary.