React-spring: Type definition for `onDestroyed` is wrong

[laptou]

🐛 Bug Report

The type definition for the onDestroyed property in the options for useTransition is wrong.

To Reproduce

It is defined like this:

export interface UseTransitionProps<TItem, DS extends object>
  extends HooksBaseProps {
  // ...

 /**
   * Called when objects have disappeared for good
   */
  onDestroyed?: (isDestroyed: boolean) => void;
}

Expected behavior

It should be defined like this:

export interface UseTransitionProps<TItem, DS extends object>
  extends HooksBaseProps {
  // ...

 /**
   * Called when objects have disappeared for good
   */
  onDestroyed?: (item: TItem) => void;
}

Environment

• react-spring v8.0.27
• react v16.13

[aleclarson]

Note: In v9 beta, the onDestroyed prop was removed. I'm open to reverting that. What's your use case?

As for v8, no one is maintaining it.

[laptou]

My use case is this:

I have an array of objects that I'm retrieving from Redux. Each one corresponds to an element that I'm displaying using useTransition and .map().

Each of the items from the Redux store has some associated data that I am storing in the state of my component, because the associated data is only relevant to this component and changes frequently.

The associated data affects where each element is placed on the page, so it cannot be deleted when the corresponding item disappears from the Redux store, or else the user will see the element jump around while disappearing. So I'm waiting until onDestroyed to delete the associated data entries corresponding to the objects that were removed from the array.

[TheSisb]

I also need the onDestroyed in V9. It's definitely hacky, but we're patching something from an existing codebase we don't own that breaks when Modals open, and need to remove that patch when Modals close. Currently, the patch is being removed when the animation starts, rather than when it ends, and the result is a couple seconds of jank when the Modal closes. :/

Is there an alternative API in v9?

[aleclarson]

If you don't mind running your unmount logic before the item is actually unmounted, you can pass an expires function.

useTransition(items, {
  expires: item => {
    // do stuff (not yet unmounted, but will be soon)
  }
})

The onDestroyed prop will exist again in the next RC. 👍