Skip to content

Enable ViewTransition onUpdate for persistence mode (Fabric)#36363

Open
zeyap wants to merge 1 commit intofacebook:mainfrom
zeyap:fix-viewtransition-onupdate-persistence-mode
Open

Enable ViewTransition onUpdate for persistence mode (Fabric)#36363
zeyap wants to merge 1 commit intofacebook:mainfrom
zeyap:fix-viewtransition-onupdate-persistence-mode

Conversation

@zeyap
Copy link
Copy Markdown
Contributor

@zeyap zeyap commented Apr 28, 2026

Summary

  • Added Cloned to BeforeAndAfterMutationTransitionMask (gated behind enableViewTransitionForPersistenceMode) so the before-mutation phase traverses into subtrees where persistence-mode clones occurred, allowing shouldStartViewTransition to be set and flushAfterMutationEffects to run
  • Introduced commitHostCloned() in ReactFiberCommitHostEffects to call trackHostMutation() for persistence-mode clones, so viewTransitionMutationContext is set and the Update flag gets applied to parent ViewTransition fibers during commit

Root Cause

In persistence mode (Fabric), host component updates happen via cloneInstance during the render phase (completeWork), not via commitUpdate during commit. The view transition system relied on two mutation-mode-only mechanisms:

  1. BeforeAndAfterMutationTransitionMask didn't include Cloned, so the before-mutation traversal skipped subtrees with only persistence-mode changes — startViewTransition was never called and flushAfterMutationEffects never ran
  2. trackHostMutation() was only called from mutation-mode commit paths (commitHostUpdate, commitHostTextUpdate), so viewTransitionMutationContext stayed false and the Update flag was never set on ViewTransition fibers

Test plan

  • Verify onUpdate fires on ViewTransition components in React Native Fabric when child host components update
  • Verify no impact on DOM renderer (changes are gated behind enableViewTransitionForPersistenceMode and supportsPersistence)
  • Verify enter/exit (share) transitions continue to work in Fabric

In persistence mode (React Native Fabric), host component updates are
performed as clones during the render phase (completeWork) rather than
as mutations during commit. This caused two issues preventing
ViewTransition's onUpdate callback from firing:

1. The Cloned flag was not included in BeforeAndAfterMutationTransitionMask,
   so the before-mutation traversal never descended into subtrees with
   persistence-mode clones. This meant shouldStartViewTransition was never
   set, startViewTransition was never called, and flushAfterMutationEffects
   never ran.

2. trackHostMutation() was never called for persistence-mode clones, so
   viewTransitionMutationContext stayed false and the Update flag was never
   set on ViewTransition fibers during commit.

This adds Cloned to BeforeAndAfterMutationTransitionMask (gated behind
enableViewTransitionForPersistenceMode) and introduces commitHostCloned()
in ReactFiberCommitHostEffects to track persistence-mode mutations for
ViewTransition detection.
@meta-cla meta-cla Bot added the CLA Signed label Apr 28, 2026
@react-sizebot
Copy link
Copy Markdown

Comparing: ad5dfc8...65b08df

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.84 kB 6.84 kB +0.05% 1.88 kB 1.88 kB
oss-stable/react-dom/cjs/react-dom-client.production.js +0.01% 612.85 kB 612.91 kB +0.01% 108.29 kB 108.30 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.84 kB 6.84 kB +0.05% 1.88 kB 1.88 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js +0.01% 678.78 kB 678.85 kB +0.01% 119.26 kB 119.27 kB
facebook-www/ReactDOM-prod.classic.js = 698.52 kB 698.24 kB = 122.73 kB 122.65 kB
facebook-www/ReactDOM-prod.modern.js = 688.83 kB 688.55 kB = 121.11 kB 121.03 kB
facebook-www/ESLintPluginReactHooks-prod.classic.js New file 0.00 kB 2,038.50 kB New file 0.00 kB 297.56 kB
facebook-www/ESLintPluginReactHooks-prod.modern.js New file 0.00 kB 2,038.50 kB New file 0.00 kB 297.56 kB
react-native/shims/ReactNative.js New file 0.00 kB 0.60 kB New file 0.00 kB 0.34 kB
react-native/shims/ReactNativeTypes.js +18.74% 5.99 kB 7.11 kB +9.82% 1.81 kB 1.99 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +3.53% 113.36 kB 117.35 kB +6.79% 21.94 kB 23.43 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +3.53% 113.36 kB 117.35 kB +6.79% 21.94 kB 23.43 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +3.51% 113.71 kB 117.71 kB +6.78% 22.03 kB 23.53 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +3.51% 113.71 kB 117.71 kB +6.78% 22.03 kB 23.53 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +3.47% 115.15 kB 119.15 kB +6.77% 22.30 kB 23.81 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +3.46% 115.50 kB 119.50 kB +6.71% 22.40 kB 23.90 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.js +2.47% 107.84 kB 110.50 kB +6.17% 21.02 kB 22.31 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.js +2.47% 107.84 kB 110.50 kB +6.17% 21.02 kB 22.31 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.js +2.43% 109.64 kB 112.30 kB +6.09% 21.38 kB 22.68 kB
facebook-www/ReactFlightClient-dev.classic.js Deleted 189.48 kB 0.00 kB Deleted 33.44 kB 0.00 kB
facebook-www/ReactFlightClient-dev.modern.js Deleted 189.48 kB 0.00 kB Deleted 33.44 kB 0.00 kB
facebook-www/ReactFlightClient-prod.classic.js Deleted 61.33 kB 0.00 kB Deleted 11.86 kB 0.00 kB
facebook-www/ReactFlightClient-prod.modern.js Deleted 61.33 kB 0.00 kB Deleted 11.86 kB 0.00 kB
facebook-www/ReactFlightServer-dev.classic.js Deleted 198.74 kB 0.00 kB Deleted 35.96 kB 0.00 kB
facebook-www/ReactFlightServer-dev.modern.js Deleted 198.74 kB 0.00 kB Deleted 35.96 kB 0.00 kB
facebook-www/ReactFlightServer-prod.classic.js Deleted 102.72 kB 0.00 kB Deleted 20.81 kB 0.00 kB
facebook-www/ReactFlightServer-prod.modern.js Deleted 102.72 kB 0.00 kB Deleted 20.81 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
facebook-www/ESLintPluginReactHooks-prod.classic.js New file 0.00 kB 2,038.50 kB New file 0.00 kB 297.56 kB
facebook-www/ESLintPluginReactHooks-prod.modern.js New file 0.00 kB 2,038.50 kB New file 0.00 kB 297.56 kB
react-native/shims/ReactNative.js New file 0.00 kB 0.60 kB New file 0.00 kB 0.34 kB
react-native/shims/ReactNativeTypes.js +18.74% 5.99 kB 7.11 kB +9.82% 1.81 kB 1.99 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +3.53% 113.36 kB 117.35 kB +6.79% 21.94 kB 23.43 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +3.53% 113.36 kB 117.35 kB +6.79% 21.94 kB 23.43 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +3.51% 113.71 kB 117.71 kB +6.78% 22.03 kB 23.53 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +3.51% 113.71 kB 117.71 kB +6.78% 22.03 kB 23.53 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-server.browser.production.js +3.47% 115.15 kB 119.15 kB +6.77% 22.30 kB 23.81 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-server.browser.production.js +3.46% 115.50 kB 119.50 kB +6.71% 22.40 kB 23.90 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.js +2.47% 107.84 kB 110.50 kB +6.17% 21.02 kB 22.31 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.js +2.47% 107.84 kB 110.50 kB +6.17% 21.02 kB 22.31 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-server.browser.production.js +2.43% 109.64 kB 112.30 kB +6.09% 21.38 kB 22.68 kB
oss-experimental/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js +1.79% 63.29 kB 64.42 kB +3.85% 12.03 kB 12.49 kB
oss-stable-semver/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js +1.79% 63.29 kB 64.42 kB +3.85% 12.03 kB 12.49 kB
oss-stable/react-server-dom-turbopack/cjs/react-server-dom-turbopack-client.browser.production.js +1.79% 63.29 kB 64.42 kB +3.85% 12.03 kB 12.49 kB
oss-experimental/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js +1.78% 63.66 kB 64.79 kB +3.81% 12.12 kB 12.58 kB
oss-stable-semver/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js +1.78% 63.66 kB 64.79 kB +3.81% 12.12 kB 12.58 kB
oss-stable/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.production.js +1.78% 63.66 kB 64.79 kB +3.81% 12.12 kB 12.58 kB
oss-experimental/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js +1.45% 61.33 kB 62.23 kB +3.73% 11.62 kB 12.05 kB
oss-stable-semver/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js +1.45% 61.33 kB 62.23 kB +3.73% 11.62 kB 12.05 kB
oss-stable/react-server-dom-parcel/cjs/react-server-dom-parcel-client.browser.production.js +1.45% 61.33 kB 62.23 kB +3.73% 11.62 kB 12.05 kB
oss-experimental/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js +1.42% 61.53 kB 62.40 kB +3.67% 11.66 kB 12.09 kB
oss-stable-semver/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js +1.42% 61.53 kB 62.40 kB +3.67% 11.66 kB 12.09 kB
oss-stable/react-server-dom-esm/cjs/react-server-dom-esm-client.browser.production.js +1.42% 61.53 kB 62.40 kB +3.67% 11.66 kB 12.09 kB
oss-experimental/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js +0.63% 101.46 kB 102.11 kB +1.26% 20.59 kB 20.85 kB
oss-stable-semver/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js +0.63% 101.46 kB 102.11 kB +1.26% 20.59 kB 20.85 kB
oss-stable/react-server-dom-esm/esm/react-server-dom-esm-client.browser.production.js +0.63% 101.46 kB 102.11 kB +1.26% 20.59 kB 20.85 kB
test_utils/ReactAllWarnings.js +0.40% 68.30 kB 68.58 kB +0.56% 17.17 kB 17.27 kB
react-native/implementations/ReactFabric-dev.fb.js +0.30% 814.96 kB 817.40 kB +0.38% 130.51 kB 131.00 kB
react-native/implementations/ReactFabric-dev.js +0.25% 777.67 kB 779.60 kB +0.33% 124.65 kB 125.06 kB
facebook-www/ReactFlightClient-dev.classic.js Deleted 189.48 kB 0.00 kB Deleted 33.44 kB 0.00 kB
facebook-www/ReactFlightClient-dev.modern.js Deleted 189.48 kB 0.00 kB Deleted 33.44 kB 0.00 kB
facebook-www/ReactFlightClient-prod.classic.js Deleted 61.33 kB 0.00 kB Deleted 11.86 kB 0.00 kB
facebook-www/ReactFlightClient-prod.modern.js Deleted 61.33 kB 0.00 kB Deleted 11.86 kB 0.00 kB
facebook-www/ReactFlightServer-dev.classic.js Deleted 198.74 kB 0.00 kB Deleted 35.96 kB 0.00 kB
facebook-www/ReactFlightServer-dev.modern.js Deleted 198.74 kB 0.00 kB Deleted 35.96 kB 0.00 kB
facebook-www/ReactFlightServer-prod.classic.js Deleted 102.72 kB 0.00 kB Deleted 20.81 kB 0.00 kB
facebook-www/ReactFlightServer-prod.modern.js Deleted 102.72 kB 0.00 kB Deleted 20.81 kB 0.00 kB

Generated by 🚫 dangerJS against 65b08df

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants