Skip to content

Commit

Permalink
Avoid VirtualizedList viewability updates during state updates
Browse files Browse the repository at this point in the history
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 #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
  • Loading branch information
NickGerleman authored and facebook-github-bot committed Mar 1, 2023
1 parent cbc279c commit 62a0640
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions packages/virtualized-lists/Lists/VirtualizedList.js
Original file line number Diff line number Diff line change
Expand Up @@ -554,8 +554,6 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
const onEndReachedThreshold = onEndReachedThresholdOrDefault(
props.onEndReachedThreshold,
);
this._updateViewableItems(props, cellsAroundViewport);

const {contentLength, offset, visibleLength} = this._scrollMetrics;
const distanceFromEnd = contentLength - visibleLength - offset;

Expand Down Expand Up @@ -1714,6 +1712,8 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
};

_updateCellsToRender = () => {
this._updateViewableItems(this.props, this.state.cellsAroundViewport);

this.setState((state, props) => {
const cellsAroundViewport = this._adjustCellsAroundViewport(
props,
Expand Down

0 comments on commit 62a0640

Please sign in to comment.