Skip to content

fix(core): expose new phase to useTransition render fn#2507

Merged
joshuaellis merged 1 commit into
nextfrom
worktree-1654
May 22, 2026
Merged

fix(core): expose new phase to useTransition render fn#2507
joshuaellis merged 1 commit into
nextfrom
worktree-1654

Conversation

@joshuaellis
Copy link
Copy Markdown
Member

Summary

In useTransition, the render fn's third argument exposes state.phase so callers can branch on lifecycle (e.g. state.phase === 'leave'). Previously this phase was only mutated inside a layout effect that runs after render, so during the render that triggered the leave animation the consumer always saw the stale 'enter'. By the time a follow-up render could have surfaced 'leave', the transition had been marked expired and pruned — so 'leave' was effectively unreachable for normal removals, only briefly observable when an item was re-added mid-leave.

Fix

In the render loop, read the upcoming phase from the changes map (or exitingTransitions when exitBeforeEnter is set) and pass a shallow copy of the transition state with that phase to the render fn. No state mutation during render; no API change; the existing layout effect still owns the canonical mutation.

Regression test in useTransition.test.tsx removes an item and asserts the render fn observed phase === 'leave' at some point during a normal removal — fails on next, passes with this change.

Closes #1654.

Previously `t.phase` was only mutated to the new phase inside a
useIsomorphicLayoutEffect, so the render fn always saw the previous
phase during the render that triggered the leave animation. The next
render that would have surfaced `'leave'` was suppressed because the
transition had already expired and been pruned, leaving consumers
unable to branch on `state.phase === 'leave'`.

Read the upcoming phase from the changes map (or exitingTransitions
when exitBeforeEnter is set) and pass a shallow copy of the
transition state with that phase to the render fn. No state mutation
during render; no API change.

Closes #1654.
@vercel
Copy link
Copy Markdown

vercel Bot commented May 22, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
react-spring Error Error May 22, 2026 8:45am

Request Review

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 22, 2026

🦋 Changeset detected

Latest commit: 5b19e9c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages
Name Type
@react-spring/core Patch
@react-spring/animated Patch
@react-spring/mock-raf Patch
@react-spring/parallax Patch
@react-spring/rafz Patch
@react-spring/shared Patch
@react-spring/types Patch
@react-spring/konva Patch
@react-spring/native Patch
@react-spring/three Patch
@react-spring/web Patch
@react-spring/zdog Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@joshuaellis joshuaellis merged commit 9765d75 into next May 22, 2026
17 of 18 checks passed
@joshuaellis joshuaellis deleted the worktree-1654 branch May 22, 2026 08:49
This was referenced May 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

phase property in useTransition does not work as expected

1 participant