Remove default 50ms Scroll Event Throttling in VirtualizedList (faceb…

…ook#38648)

Summary:
Pull Request resolved: facebook#38648

facebook#38475 made this code no longer no-op on Android, which caused regressions documented in facebook#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: bf0befb1b9146e2173069c484735dc287b956e37

packages/react-native/Libraries/Animated/components/AnimatedFlatList.js

@@ -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(

packages/react-native/Libraries/Animated/components/AnimatedSectionList.js

@@ -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(

packages/react-native/Libraries/Lists/__tests__/__snapshots__/FlatList-test.js.snap

@@ -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}
@@ -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 []}
 >
@@ -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}
@@ -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 []}
 >
@@ -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 []}
 >
@@ -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 []}
 >
@@ -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 []}
 >
@@ -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 []}
 >
@@ -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 []}
 >

packages/react-native/Libraries/Lists/__tests__/__snapshots__/SectionList-test.js.snap

@@ -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,
@@ -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,
@@ -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,
@@ -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,
@@ -422,7 +422,7 @@ exports[`SectionList renders empty list 1`] = `
   onScrollBeginDrag={[Function]}
   onScrollEndDrag={[Function]}
   renderItem={[Function]}
-  scrollEventThrottle={50}
+  scrollEventThrottle={0.0001}
   stickyHeaderIndices={Array []}
 >
   <View />

packages/virtualized-lists/Lists/VirtualizedList.js

@@ -62,7 +62,6 @@ import {
   maxToRenderPerBatchOrDefault,
   onStartReachedThresholdOrDefault,
   onEndReachedThresholdOrDefault,
-  scrollEventThrottleOrDefault,
   windowSizeOrDefault,
 } from './VirtualizedListProps';
 
@@ -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

packages/virtualized-lists/Lists/VirtualizedListProps.js

@@ -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;