From 5707b9de7e468ba62ef81e13178092f31d590316 Mon Sep 17 00:00:00 2001 From: Janic Duplessis Date: Sat, 20 May 2023 14:12:19 -0400 Subject: [PATCH 1/2] Increase FlatList batch size --- src/components/InvertedFlatList/BaseInvertedFlatList.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js index d3fcda0ea5fd..0327e4e0b5b9 100644 --- a/src/components/InvertedFlatList/BaseInvertedFlatList.js +++ b/src/components/InvertedFlatList/BaseInvertedFlatList.js @@ -136,8 +136,10 @@ class BaseInvertedFlatList extends Component { // Native platforms do not need to measure items and work fine without this. // Web requires that items be measured or else crazy things happen when scrolling. getItemLayout={this.props.shouldMeasureItems ? this.getItemLayout : undefined} - // We keep this property very low so that chat switching remains fast - maxToRenderPerBatch={1} + // Keep batch size relatively small for responsiveness, but not too small as it will cause + // excessive rendering. See https://github.com/Expensify/App/pull/19345 for performance testing + // of this value. + maxToRenderPerBatch={10} windowSize={15} // Commenting the line below as it breaks the unread indicator test From 2c1608392cf2f5b73520031659cf0f59e7a6721e Mon Sep 17 00:00:00 2001 From: Janic Duplessis Date: Thu, 21 Sep 2023 10:38:39 +0200 Subject: [PATCH 2/2] Set batch size to 1 only on web --- src/components/InvertedFlatList/BaseInvertedFlatList.js | 4 ---- src/components/InvertedFlatList/index.js | 3 +++ 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js index 0327e4e0b5b9..0bfffb733052 100644 --- a/src/components/InvertedFlatList/BaseInvertedFlatList.js +++ b/src/components/InvertedFlatList/BaseInvertedFlatList.js @@ -136,10 +136,6 @@ class BaseInvertedFlatList extends Component { // Native platforms do not need to measure items and work fine without this. // Web requires that items be measured or else crazy things happen when scrolling. getItemLayout={this.props.shouldMeasureItems ? this.getItemLayout : undefined} - // Keep batch size relatively small for responsiveness, but not too small as it will cause - // excessive rendering. See https://github.com/Expensify/App/pull/19345 for performance testing - // of this value. - maxToRenderPerBatch={10} windowSize={15} // Commenting the line below as it breaks the unread indicator test diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js index 74409e9a0fe0..d46cd5801605 100644 --- a/src/components/InvertedFlatList/index.js +++ b/src/components/InvertedFlatList/index.js @@ -119,6 +119,9 @@ function InvertedFlatList(props) { shouldMeasureItems contentContainerStyle={StyleSheet.compose(contentContainerStyle, styles.justifyContentEnd)} onScroll={handleScroll} + // We need to keep batch size to one to workaround a bug in react-native-web. + // This can be removed once https://github.com/Expensify/App/pull/24482 is merged. + maxToRenderPerBatch={1} /> ); }