Skip to content

useTransition API rewrite #2540

@joshuaellis

Description

@joshuaellis

A clear and concise description of what the feature is

Rewrite useTransition (packages/core/src/hooks/useTransition.tsx) around a declarative enter/leave model — presence made explicit, "obvious on first read" — without the render-prop bookkeeping it has today:

// today — you index into a render prop, and it's unclear where `item` comes from
const transitions = useTransition(items, {
  keys: item => item.id,
  from: { opacity: 0 },
  enter: { opacity: 1 },
  leave: { opacity: 0 },
})
return transitions((style, item) => (
  <animated.div style={style}>{item.text}</animated.div>
))

Would also subsume #2136 (per-property configs should fall out of the new model rather than be bolted on).

Why should this feature be included?

useTransition is the library's most-reported source of confusion — the same friction recurs across years:

Related issues

Scope / non-goals

  • The exact new API shape is what this issue is to settle.
  • It must keep react-spring's model: you own the springs and the new API orchestrates them. Presence must not become props on animated.* that create/own springs internally — that inverts the model (see the reasoning on [feat]: Create an animation abstraction for spring and gesture #1826).

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: corerelates to core classes // parts of the librarykind: requestNew feature or request that should be actionedrelease: major

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions