Permalink
Browse files

Fix initial-render triggering a render of all items.

Summary:
When rendering a large list without a getItemLayout (ie SectionList, where it's hard to compute), it freaks out and attempt to render them all, starving the rendering/layout engine from computing the size (and more accurately figurnge out how few it actually should render.)

Before this change, with <FlatList maxToRenderPerBatch={5} data={objectOfLengthN} />, I essentially saw it doing:
```
{first: 0, last: 0}
{first: 0, last: 5}
{first: 0, last: 10}
....
{first: 0, last: N}
```
(no more hiPri renders since all elements have been rendered)
(actually renders and lays out all N objects, and computes their sizes)
(realizes that it doesn't need to show all N for my current screen size and row size)
```{first: 0, last: 55}```

After this change, that whole first part where it keeps incrementing `last` to try to "keep up with the scrolling" disappears.
Closes #14563

Differential Revision: D5278796

Pulled By: sahrens

fbshipit-source-id: 5db117b40909ec4bc92fba9b5556c6a2add046ac
  • Loading branch information...
mikelambert authored and facebook-github-bot committed Jun 19, 2017
1 parent 3c4057c commit ebcf5fd24173c2628a5dcc65871fa7a8b219f96e
Showing with 6 additions and 1 deletion.
  1. +6 −1 Libraries/Lists/VirtualizedList.js
@@ -972,7 +972,12 @@ class VirtualizedList extends React.PureComponent<OptionalProps, Props, State> {
(velocity < -2 && distTop < scrollingThreshold) ||
(velocity > 2 && distBottom < scrollingThreshold);
}
if (hiPri) {
// Only trigger high-priority updates if we've actually rendered cells,
// and with that size estimate, accurately compute how many cells we should render.
// Otherwise, it would just render as many cells as it can (of zero dimension),
// each time through attempting to render more (limited by maxToRenderPerBatch),
// starving the renderer from actually laying out the objects and computing _averageCellLength.
if (hiPri && this._averageCellLength) {
// Don't worry about interactions when scrolling quickly; focus on filling content as fast
// as possible.
this._updateCellsToRenderBatcher.dispose({abort: true});

0 comments on commit ebcf5fd

Please sign in to comment.