Skip to content

Commit

Permalink
introduce Fabric View Culling (#49198)
Browse files Browse the repository at this point in the history
Summary:

changelog: [internal]

The work done on the main thread should scale with what is on the screen. React Native shouldn’t block the main thread for off screen elements that do not affect what is shown to the end user. When React schedules a commit, only views needed to achieve a screen full of content should be materialised and added to the host platform’s view hierarchy. 

With Fabric View Culling, views that do not contribute pixels to the screen will not materialize and updates to them will be skipped. React Native will focus system resources on what is visible to the end user. 

Fabric View Culling maximises benefits from view recycling. Each UI element such as text, image, or video is recycled individually. As soon as an item goes off screen, it can be reused anywhere in the UI and pieced together with other items to create new UI elements. Such recycling reduces the need of having multiple view types and improves memory usage and scroll performance.


In the example bellow, view B will not be mounted because the user can't see it.
 {F1974949953} 

The difference in number of allocated views:
Please note, the screenshots below are from Xcode View Hierarchy debugger. To show how many views are allocated in memory, I disabled [removeClippedSubviews](https://reactnative.dev/docs/scrollview#removeclippedsubviews) flag globally.
|Before|After:
| {F1974949979}| {F1974949981}


# Disclaimer, this is not a complete implementation
This implementation is not complete and it is missing to handle edge cases. 
Things that are missing:
- Transform style is not taken into account.
- removeClippedSubviews is not respected. Fabric View Culling happens unconditionally for every scroll view.
- Fabric View Culling does not respect when ScrollView has overflow set to visible.
- Fabric View Culling is only performant enough on iOS.
- [enableSynchronousStateUpdates](https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js#L248) must be enabled for Fabric View Culling to work correctly.

Differential Revision: D63458372
  • Loading branch information
sammy-SC authored and facebook-github-bot committed Feb 5, 2025
1 parent 3f942f0 commit 478abe6
Show file tree
Hide file tree
Showing 5 changed files with 942 additions and 63 deletions.
Loading

0 comments on commit 478abe6

Please sign in to comment.