Skip to content

Add Fragment Refs to Fabric with intersection observer support - #33056

Merged
jackpope merged 2 commits into
react:mainfrom
jackpope:fragment-ref-observers-rn
Apr 30, 2025
Merged

Add Fragment Refs to Fabric with intersection observer support#33056
jackpope merged 2 commits into
react:mainfrom
jackpope:fragment-ref-observers-rn

Conversation

@jackpope

Copy link
Copy Markdown
Collaborator

Adds Fragment Ref support to RN through the Fabric config, starting with observeUsing/unobserveUsing. This is mostly a copy from the implementation on DOM, and some of it can likely be shared in the future but keeping it separate for now and we can refactor as we add more features.

Added a basic test with Fabric, but testing specific methods requires so much mocking that it doesn't seem valuable here.

I built Fabric and ran on the Catalyst app internally to test with intersection observers end to end.

@rubennorte rubennorte left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good but please make sure we have E2E tests for this in React Native with Fantom when we sync the reconciler.

@react-sizebot

Copy link
Copy Markdown

Comparing: 88b9767...a03db6e

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.68 kB 6.68 kB = 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 527.81 kB 527.81 kB = 93.08 kB 93.08 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB = 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 633.44 kB 633.44 kB = 111.27 kB 111.27 kB
facebook-www/ReactDOM-prod.classic.js = 671.22 kB 671.22 kB = 117.71 kB 117.71 kB
facebook-www/ReactDOM-prod.modern.js = 661.50 kB 661.50 kB = 116.15 kB 116.15 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
facebook-react-native/react-dom/cjs/ReactDOMClient-prod.js +2.00% 551.98 kB 563.02 kB +2.01% 97.10 kB 99.05 kB
facebook-react-native/react-dom/cjs/ReactDOMProfiling-prod.js +1.98% 557.48 kB 568.52 kB +1.99% 98.19 kB 100.14 kB
facebook-react-native/react-dom/cjs/ReactDOMClient-profiling.js +1.90% 580.20 kB 591.24 kB +1.97% 101.08 kB 103.07 kB
facebook-react-native/react-dom/cjs/ReactDOMProfiling-profiling.js +1.88% 586.14 kB 597.18 kB +1.94% 102.24 kB 104.23 kB
facebook-react-native/react-dom/cjs/ReactDOMClient-dev.js +1.27% 1,007.79 kB 1,020.60 kB +1.27% 168.88 kB 171.02 kB
facebook-react-native/react-dom/cjs/ReactDOMProfiling-dev.js +1.25% 1,024.11 kB 1,036.93 kB +1.23% 171.73 kB 173.85 kB
react-native/implementations/ReactFabric-prod.fb.js +0.99% 381.82 kB 385.59 kB +0.99% 65.91 kB 66.56 kB
react-native/implementations/ReactFabric-profiling.fb.js +0.92% 410.00 kB 413.77 kB +0.97% 70.02 kB 70.70 kB
react-native/implementations/ReactFabric-dev.fb.js +0.70% 670.34 kB 675.04 kB +0.69% 108.79 kB 109.54 kB
react-native/implementations/ReactNativeRenderer-prod.fb.js +0.45% 385.62 kB 387.37 kB +0.36% 66.54 kB 66.78 kB
react-native/implementations/ReactNativeRenderer-profiling.fb.js +0.42% 413.74 kB 415.48 kB +0.43% 70.64 kB 70.94 kB
react-native/implementations/ReactNativeRenderer-dev.fb.js +0.34% 676.47 kB 678.74 kB +0.24% 109.79 kB 110.05 kB

Generated by 🚫 dangerJS against a03db6e

@jackpope
jackpope merged commit 408d055 into react:main Apr 30, 2025
@jackpope
jackpope deleted the fragment-ref-observers-rn branch April 30, 2025 14:47
github-actions Bot pushed a commit that referenced this pull request Apr 30, 2025
Adds Fragment Ref support to RN through the Fabric config, starting with
`observeUsing`/`unobserveUsing`. This is mostly a copy from the
implementation on DOM, and some of it can likely be shared in the future
but keeping it separate for now and we can refactor as we add more
features.

Added a basic test with Fabric, but testing specific methods requires so
much mocking that it doesn't seem valuable here.

I built Fabric and ran on the Catalyst app internally to test with
intersection observers end to end.

DiffTrain build for [408d055](408d055)
ayan-de pushed a commit to ayan-de/react that referenced this pull request Aug 26, 2026
ayan-de pushed a commit to ayan-de/react that referenced this pull request Aug 26, 2026
ayan-de pushed a commit to ayan-de/react that referenced this pull request Sep 11, 2026
ayan-de pushed a commit to ayan-de/react that referenced this pull request Sep 11, 2026
ayan-de pushed a commit to ayan-de/react that referenced this pull request Sep 12, 2026
ayan-de pushed a commit to ayan-de/react that referenced this pull request Sep 12, 2026
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.

4 participants