Skip to content
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

introduce Fabric View Culling #49198

Closed
wants to merge 3 commits into from
Closed

Conversation

sammy-SC
Copy link
Contributor

@sammy-SC sammy-SC commented Feb 5, 2025

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 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 must be enabled for Fabric View Culling to work correctly.

Differential Revision: D63458372

@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Facebook Partner: Facebook Partner labels Feb 5, 2025
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D63458372

sammy-SC added a commit to sammy-SC/react-native that referenced this pull request Feb 5, 2025
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
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D63458372

sammy-SC added a commit to sammy-SC/react-native that referenced this pull request Feb 5, 2025
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
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D63458372

sammy-SC added a commit to sammy-SC/react-native that referenced this pull request Feb 5, 2025
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
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D63458372

1 similar comment
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D63458372

sammy-SC added a commit to sammy-SC/react-native that referenced this pull request Feb 6, 2025
Summary:
Pull Request resolved: facebook#49198

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
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D63458372

sammy-SC added a commit to sammy-SC/react-native that referenced this pull request Feb 6, 2025
Summary:
Pull Request resolved: facebook#49198

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
sammy-SC added a commit to sammy-SC/react-native that referenced this pull request Feb 6, 2025
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
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D63458372

sammy-SC added a commit to sammy-SC/react-native that referenced this pull request Feb 6, 2025
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.

Reviewed By: javache

Differential Revision: D63458372
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D63458372

sammy-SC added a commit to sammy-SC/react-native that referenced this pull request Feb 7, 2025
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.

Reviewed By: javache

Differential Revision: D63458372
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D63458372

sammy-SC added a commit to sammy-SC/react-native that referenced this pull request Feb 7, 2025
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.

Reviewed By: javache

Differential Revision: D63458372
sammy-SC added a commit to sammy-SC/react-native that referenced this pull request Feb 7, 2025
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.

Reviewed By: javache

Differential Revision: D63458372
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D63458372

sammy-SC added a commit to sammy-SC/react-native that referenced this pull request Feb 7, 2025
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.

Reviewed By: javache

Differential Revision: D63458372
sammy-SC added a commit to sammy-SC/react-native that referenced this pull request Feb 7, 2025
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.

Reviewed By: javache

Differential Revision: D63458372
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D63458372

sammy-SC added a commit to sammy-SC/react-native that referenced this pull request Feb 7, 2025
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.

Reviewed By: javache

Differential Revision: D63458372
Summary:

changelog: [internal]

introduces feature flag for Fabric View Culling. Not used anywhere yet.

Reviewed By: christophpurrer

Differential Revision: D68775684
Summary:

changelog: [internal]

Adds new method to LayoutMetrics that calculates frame adjusted for overflow inset.


For example, for the following view hierarchy. it would produce a frame that would fully contain view A and view B.
```
┌─────────────┐
│<View A />   │
│     ┌───────┴─────┐
└─────┤<View B />   │
      │             │
      └─────────────┘
```


See tests for more details

Reviewed By: javache, lenaic

Differential Revision: D68775683
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.

Reviewed By: javache

Differential Revision: D63458372
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D63458372

@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Feb 7, 2025
@facebook-github-bot
Copy link
Contributor

This pull request has been merged in 947d9c3.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. fb-exported Merged This PR has been merged. p: Facebook Partner: Facebook Partner
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants