Skip to content

Add Fragment Refs to Fabric with intersection observer support #33056

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 30, 2025

Conversation

jackpope
Copy link
Member

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.

Copy link
Contributor

@rubennorte rubennorte left a comment

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

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 facebook:main Apr 30, 2025
414 of 415 checks passed
@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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
4 participants