From 62a0640e4a8297177e857530e46010e83315e70a Mon Sep 17 00:00:00 2001 From: Nick Gerleman Date: Wed, 1 Mar 2023 06:44:33 -0800 Subject: [PATCH] Avoid VirtualizedList viewability updates during state updates Summary: VirtualizedList refactoring moved [a call of `_updateViewableItems`](https://www.internalfb.com/code/fbsource/[a9d4ad3cf149][history][blame]/xplat/js/react-native-github/Libraries/Lists/VirtualizedList.js?lines=1431-1447) to the inside of a state update. This call may trigger an `onViewableItemsChanged`, which is normally not an issue (minus changing timing), but creates problems if the users callback then calls imperative methods on the VirtualizedList, since the batched state update may be in the process of changing the props/state the imperative method is reading. See https://github.com/facebook/react-native/issues/36329 for what I suspect is an example of this. This moves the `_updateViewableItems` call to before the state update, like the previous version of VirtualizedList. Changelog: [General][Fixed] - Avoid VirtualizedList viewability updates during state updates Reviewed By: javache Differential Revision: D43665606 fbshipit-source-id: 9398273c5209e371e69aafb02bac173c69874273 --- packages/virtualized-lists/Lists/VirtualizedList.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/virtualized-lists/Lists/VirtualizedList.js b/packages/virtualized-lists/Lists/VirtualizedList.js index 96f9736a839d02..04d78147ce7c2c 100644 --- a/packages/virtualized-lists/Lists/VirtualizedList.js +++ b/packages/virtualized-lists/Lists/VirtualizedList.js @@ -554,8 +554,6 @@ class VirtualizedList extends StateSafePureComponent { const onEndReachedThreshold = onEndReachedThresholdOrDefault( props.onEndReachedThreshold, ); - this._updateViewableItems(props, cellsAroundViewport); - const {contentLength, offset, visibleLength} = this._scrollMetrics; const distanceFromEnd = contentLength - visibleLength - offset; @@ -1714,6 +1712,8 @@ class VirtualizedList extends StateSafePureComponent { }; _updateCellsToRender = () => { + this._updateViewableItems(this.props, this.state.cellsAroundViewport); + this.setState((state, props) => { const cellsAroundViewport = this._adjustCellsAroundViewport( props,