Skip to content

Commit e3aad65

Browse files
NickGerlemanfacebook-github-bot
authored andcommitted
VirtualizedList up-to-date state: Use correct form of setState() in _onCellFocusCapture()
Summary: This diff is part of an overall stack, meant to fix incorrect usage of `setState()` in `VirtualizedList`, which triggers new invariant checks added in `VirtualizedList_EXPERIMENTAL`. See the stack summary below for more information on the broader change. ## Diff Summary `_onCellFocusCapture()` derives state from existing state, so it should be wrapped in a state updater to compare against the latest value in the batch. ## Stack Summary `VirtualizedList`'s component state is a set of cells to render. This state is set via the `setState()` class component API. The main "tick" function `VirtualizedList._updateCellsToRender()` calculates this new state using a combination of the current component state, and instance-local state like maps, measurement caches, etc. From: https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous --- > React may batch multiple setState() calls into a single update for performance. Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state. For example, this code may fail to update the counter: ``` // Wrong this.setState({ counter: this.state.counter + this.props.increment, }); ``` > To fix it, use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument: ``` // Correct this.setState((state, props) => ({ counter: state.counter + props.increment })); ``` --- `_updateCellsToRender()` transitively calls many functions which will read directly from `this.props` or `this.state` instead of the value passed by the state updater. This intermittently fires invariant violations, when there is a mismatch. This diff migrates all usages of `props` and `state` during state update to the values provied in `setState()`. To prevent future mismatch, and to provide better clarity on when it is safe to use `this.props`, `this.state`, I overrode `setState` to fire an invariant violation if it is accessed when it is unsafe to: {F756963772} Changelog: [Internal][Fixed] - Use correct form of setState() in _onCellFocusCapture() Reviewed By: genkikondo Differential Revision: D38293583 fbshipit-source-id: 1d0e5152e6c1757408e39dff225e07accc5ee49f
1 parent f40ceb7 commit e3aad65

1 file changed

Lines changed: 6 additions & 3 deletions

File tree

Libraries/Lists/VirtualizedList_EXPERIMENTAL.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1286,9 +1286,12 @@ class VirtualizedList extends React.PureComponent<Props, State> {
12861286
this._getNonViewportRenderRegions(this.props),
12871287
);
12881288

1289-
if (!renderMask.equals(this.state.renderMask)) {
1290-
this.setState({...this.state, renderMask});
1291-
}
1289+
this.setState(state => {
1290+
if (!renderMask.equals(state.renderMask)) {
1291+
return {renderMask};
1292+
}
1293+
return null;
1294+
});
12921295
}
12931296

12941297
_onCellUnmount = (cellKey: string) => {

0 commit comments

Comments
 (0)