Skip to content

Commit

Permalink
Remove default 50ms Scroll Event Throttling in VirtualizedList (#38648)
Browse files Browse the repository at this point in the history
Summary:
Pull Request resolved: #38648

#38475 made this code no longer no-op on Android, which caused regressions documented in #38470 (comment) due to VirtualizedList having more out-of-date information.

We are already coalescing scroll events on both Android and iOS, which will ensure we are not flooded with events. VirtualizedList also already inserts an artificial 50ms delay to new renders by default when high priority work is not happening (see `updateCellsBatchingPeriod`). This limits the heavy work done by VirtualizedList (no new renders or expensive math on scroll events), while letting the list still have the most recent events.

We can eventually remove this once VirtualizedList is able to use OffScreen universally.

Changelog:
[General][Changed] - Remove default 50ms Scroll Event Throttling in VirtualizedList

Reviewed By: ryancat

Differential Revision: D47823772

fbshipit-source-id: 55d22a1074235ccc1b2cf167f6b1758640c79edb
  • Loading branch information
NickGerleman authored and facebook-github-bot committed Jul 31, 2023
1 parent b0a8d45 commit 3eccc53
Show file tree
Hide file tree
Showing 8 changed files with 90 additions and 98 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const FlatListWithEventThrottle = React.forwardRef(
ref:
| ((null | FlatList<mixed>) => mixed)
| {current: null | FlatList<mixed>, ...},
) => <FlatList scrollEventThrottle={0.0001} {...props} ref={ref} />,
) => <FlatList {...props} ref={ref} />,
);

export default (createAnimatedComponent(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const SectionListWithEventThrottle = React.forwardRef(
current: null | SectionList<SectionBase<$FlowFixMe>>,
...
},
) => <SectionList scrollEventThrottle={0.0001} {...props} ref={ref} />,
) => <SectionList {...props} ref={ref} />,
);

export default (createAnimatedComponent(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ exports[`FlatList ignores invalid data 1`] = `
pagingEnabled={false}
removeClippedSubviews={false}
renderItem={[Function]}
scrollEventThrottle={50}
scrollEventThrottle={0.0001}
scrollViewRef={[Function]}
sendMomentumEvents={true}
snapToEnd={true}
Expand Down Expand Up @@ -104,7 +104,7 @@ exports[`FlatList renders all the bells and whistles 1`] = `
refreshing={false}
removeClippedSubviews={false}
renderItem={[Function]}
scrollEventThrottle={50}
scrollEventThrottle={0.0001}
stickyHeaderIndices={Array []}
viewabilityConfigCallbackPairs={Array []}
>
Expand Down Expand Up @@ -222,7 +222,7 @@ exports[`FlatList renders array-like data 1`] = `
pagingEnabled={false}
removeClippedSubviews={false}
renderItem={[Function]}
scrollEventThrottle={50}
scrollEventThrottle={0.0001}
scrollViewRef={[Function]}
sendMomentumEvents={true}
snapToEnd={true}
Expand Down Expand Up @@ -295,7 +295,7 @@ exports[`FlatList renders empty list 1`] = `
onScrollEndDrag={[Function]}
removeClippedSubviews={false}
renderItem={[Function]}
scrollEventThrottle={50}
scrollEventThrottle={0.0001}
stickyHeaderIndices={Array []}
viewabilityConfigCallbackPairs={Array []}
>
Expand All @@ -317,7 +317,7 @@ exports[`FlatList renders null list 1`] = `
onScrollEndDrag={[Function]}
removeClippedSubviews={false}
renderItem={[Function]}
scrollEventThrottle={50}
scrollEventThrottle={0.0001}
stickyHeaderIndices={Array []}
viewabilityConfigCallbackPairs={Array []}
>
Expand Down Expand Up @@ -352,7 +352,7 @@ exports[`FlatList renders simple list (multiple columns) 1`] = `
onScrollEndDrag={[Function]}
removeClippedSubviews={false}
renderItem={[Function]}
scrollEventThrottle={50}
scrollEventThrottle={0.0001}
stickyHeaderIndices={Array []}
viewabilityConfigCallbackPairs={Array []}
>
Expand Down Expand Up @@ -425,7 +425,7 @@ exports[`FlatList renders simple list 1`] = `
onScrollEndDrag={[Function]}
removeClippedSubviews={false}
renderItem={[Function]}
scrollEventThrottle={50}
scrollEventThrottle={0.0001}
stickyHeaderIndices={Array []}
viewabilityConfigCallbackPairs={Array []}
>
Expand Down Expand Up @@ -488,7 +488,7 @@ exports[`FlatList renders simple list using ListItemComponent (multiple columns)
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
removeClippedSubviews={false}
scrollEventThrottle={50}
scrollEventThrottle={0.0001}
stickyHeaderIndices={Array []}
viewabilityConfigCallbackPairs={Array []}
>
Expand Down Expand Up @@ -561,7 +561,7 @@ exports[`FlatList renders simple list using ListItemComponent 1`] = `
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
removeClippedSubviews={false}
scrollEventThrottle={50}
scrollEventThrottle={0.0001}
stickyHeaderIndices={Array []}
viewabilityConfigCallbackPairs={Array []}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ exports[`SectionList rendering empty section headers is fine 1`] = `
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
renderItem={[Function]}
scrollEventThrottle={50}
scrollEventThrottle={0.0001}
stickyHeaderIndices={
Array [
0,
Expand Down Expand Up @@ -89,7 +89,7 @@ exports[`SectionList renders a footer when there is no data 1`] = `
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
renderItem={[Function]}
scrollEventThrottle={50}
scrollEventThrottle={0.0001}
stickyHeaderIndices={
Array [
0,
Expand Down Expand Up @@ -140,7 +140,7 @@ exports[`SectionList renders a footer when there is no data and no header 1`] =
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
renderItem={[Function]}
scrollEventThrottle={50}
scrollEventThrottle={0.0001}
stickyHeaderIndices={
Array [
0,
Expand Down Expand Up @@ -231,7 +231,7 @@ exports[`SectionList renders all the bells and whistles 1`] = `
}
refreshing={false}
renderItem={[Function]}
scrollEventThrottle={50}
scrollEventThrottle={0.0001}
stickyHeaderIndices={
Array [
1,
Expand Down Expand Up @@ -422,7 +422,7 @@ exports[`SectionList renders empty list 1`] = `
onScrollBeginDrag={[Function]}
onScrollEndDrag={[Function]}
renderItem={[Function]}
scrollEventThrottle={50}
scrollEventThrottle={0.0001}
stickyHeaderIndices={Array []}
>
<View />
Expand Down
7 changes: 3 additions & 4 deletions packages/virtualized-lists/Lists/VirtualizedList.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,6 @@ import {
maxToRenderPerBatchOrDefault,
onStartReachedThresholdOrDefault,
onEndReachedThresholdOrDefault,
scrollEventThrottleOrDefault,
windowSizeOrDefault,
} from './VirtualizedListProps';

Expand Down Expand Up @@ -1073,9 +1072,9 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
onScrollEndDrag: this._onScrollEndDrag,
onMomentumScrollBegin: this._onMomentumScrollBegin,
onMomentumScrollEnd: this._onMomentumScrollEnd,
scrollEventThrottle: scrollEventThrottleOrDefault(
this.props.scrollEventThrottle,
), // TODO: Android support
// iOS/macOS requires a non-zero scrollEventThrottle to fire more than a
// single notification while scrolling. This will otherwise no-op.
scrollEventThrottle: this.props.scrollEventThrottle ?? 0.0001,
invertStickyHeaders:
this.props.invertStickyHeaders !== undefined
? this.props.invertStickyHeaders
Expand Down
7 changes: 0 additions & 7 deletions packages/virtualized-lists/Lists/VirtualizedListProps.js
Original file line number Diff line number Diff line change
Expand Up @@ -331,13 +331,6 @@ export function onEndReachedThresholdOrDefault(
return onEndReachedThreshold ?? 2;
}

// scrollEventThrottleOrDefault(this.props.scrollEventThrottle)
export function scrollEventThrottleOrDefault(
scrollEventThrottle: ?number,
): number {
return scrollEventThrottle ?? 50;
}

// windowSizeOrDefault(this.props.windowSize)
export function windowSizeOrDefault(windowSize: ?number): number {
return windowSize ?? 21;
Expand Down
Loading

0 comments on commit 3eccc53

Please sign in to comment.