Function useTransition

packages/core/src/hooks/useTransition.tsx:73–481

(
  data: unknown,
  props: UseTransitionProps | (() => any),
  deps?: any[]
)

  : never

export function useTransition(
  data: unknown,
  props: UseTransitionProps | (() => any),
  deps?: any[]
): any {
  const propsFn = is.fun(props) && props

  const {
    reset,
    sort,
    trail = 0,
    reverse = false,
    expires = true,
    exitBeforeEnter = false,
    onDestroyed,
    ref: propsRef,
    config: propsConfig,
  }: UseTransitionProps<any> = propsFn ? propsFn() : props

  // Return a `SpringRef` if a deps array was passed.
  const ref = useMemo(
    () => (propsFn || arguments.length == 3 ? SpringRef() : void 0),
    []
  )

  // Every item has its own transition.
  const items = toArray(data)
  const transitions: TransitionState[] = []

  // The "onRest" callbacks need a ref to the latest transitions.
  const usedTransitions = useRef<TransitionState[] | null>(null)
  const prevTransitions = reset ? null : usedTransitions.current

  useIsomorphicLayoutEffect(() => {
    usedTransitions.current = transitions
  })

  useOnce(() => {
    /**
     * If transitions exist on mount of the component
     * then reattach their refs on-mount, this was required
     * for react18 strict mode to work properly.
     *
     * StrictMode's simulated unmount detaches the controller from its ref but
     * leaves `ctrl.ref` set, so we reset it here to let the commit phase's
     * `replaceRef` reattach an *injected* ref. We must NOT assign the local
     * `ref` to `ctrl.ref` — that would make a function/deps-form transition
     * defer its enter animation as if a ref were injected (see #2287).
     *
     * See https://github.com/pmndrs/react-spring/issues/1890
     */

    each(transitions, t => {
      ref?.add(t.ctrl)
      t.ctrl.ref = undefined
    })

    // Destroy all transitions on dismount.