-
Notifications
You must be signed in to change notification settings - Fork 24.5k
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
Conversation
This pull request was exported from Phabricator. Differential Revision: D63458372 |
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
77a04bb
to
566d766
Compare
This pull request was exported from Phabricator. Differential Revision: D63458372 |
566d766
to
478abe6
Compare
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
This pull request was exported from Phabricator. Differential Revision: D63458372 |
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
478abe6
to
5d88571
Compare
This pull request was exported from Phabricator. Differential Revision: D63458372 |
1 similar comment
This pull request was exported from Phabricator. Differential Revision: D63458372 |
5d88571
to
1a950c0
Compare
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
This pull request was exported from Phabricator. Differential Revision: D63458372 |
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
1a950c0
to
e85e6d4
Compare
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
e85e6d4
to
7c3f552
Compare
This pull request was exported from Phabricator. Differential Revision: D63458372 |
7c3f552
to
7d8e79c
Compare
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
This pull request was exported from Phabricator. Differential Revision: D63458372 |
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
7d8e79c
to
6bf45c9
Compare
This pull request was exported from Phabricator. Differential Revision: D63458372 |
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] 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
6bf45c9
to
d9cd99f
Compare
This pull request was exported from Phabricator. Differential Revision: D63458372 |
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
d9cd99f
to
798a998
Compare
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
This pull request was exported from Phabricator. Differential Revision: D63458372 |
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
798a998
to
d7c9b31
Compare
This pull request was exported from Phabricator. Differential Revision: D63458372 |
This pull request has been merged in 947d9c3. |
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:
Differential Revision: D63458372