virtual-scroller 1.16.2 → 1.16.4

package/source/Layout.test.js

@@ -1,6 +1,7 @@
-import Layout from './Layout.js'
+import { describe, it } from 'mocha'
+import { expect } from 'chai'
 
-import Engine from './test/Engine.js'
+import Layout from './Layout.js'
 
 describe('Layout', function() {
 	it('should work', function() {
@@ -29,61 +30,61 @@ describe('Layout', function() {
 		})
 
 		// Initial render.
-		layout.getShownItemIndexes({
+		expect(layout.getShownItemIndexes({
 			itemsCount: items.length,
 			visibleAreaInsideTheList: {
 				top: 0,
 				bottom: SCREEN_HEIGHT
 			}
-		}).should.deep.equal({
+		})).to.deep.equal({
 			firstShownItemIndex: 0,
 			lastShownItemIndex: 2
 		})
 
 		// The first item is almost hidden.
-		layout.getShownItemIndexes({
+		expect(layout.getShownItemIndexes({
 			itemsCount: items.length,
 			visibleAreaInsideTheList: {
 				top: SCREEN_HEIGHT + ITEM_HEIGHT - 1,
 				bottom: (SCREEN_HEIGHT + ITEM_HEIGHT - 1) + SCREEN_HEIGHT
 			}
-		}).should.deep.equal({
+		})).to.deep.equal({
 			firstShownItemIndex: 0,
 			lastShownItemIndex: 4
 		})
 
 		// The first item is hidden.
-		layout.getShownItemIndexes({
+		expect(layout.getShownItemIndexes({
 			itemsCount: items.length,
 			visibleAreaInsideTheList: {
 				top: SCREEN_HEIGHT + ITEM_HEIGHT,
 				bottom: (SCREEN_HEIGHT + ITEM_HEIGHT) + SCREEN_HEIGHT
 			}
-		}).should.deep.equal({
+		})).to.deep.equal({
 			firstShownItemIndex: 1,
 			lastShownItemIndex: 4
 		})
 
 		// A new item at the bottom is almost visible.
-		layout.getShownItemIndexes({
+		expect(layout.getShownItemIndexes({
 			itemsCount: items.length,
 			visibleAreaInsideTheList: {
 				top: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT * 2,
 				bottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 - SCREEN_HEIGHT
 			}
-		}).should.deep.equal({
+		})).to.deep.equal({
 			firstShownItemIndex: 1,
 			lastShownItemIndex: 4
 		})
 
 		// A new item at the bottom is visible.
-		layout.getShownItemIndexes({
+		expect(layout.getShownItemIndexes({
 			itemsCount: items.length,
 			visibleAreaInsideTheList: {
 				top: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT * 2,
 				bottom: (ITEM_HEIGHT + VERTICAL_SPACING) * 5 + 1 - SCREEN_HEIGHT
 			}
-		}).should.deep.equal({
+		})).to.deep.equal({
 			firstShownItemIndex: 1,
 			lastShownItemIndex: 5
 		})
@@ -112,7 +113,7 @@ describe('Layout', function() {
 			getScrollableContainerHeight: () => scrollableContainer.height
 		})
 
-		layout.getLayoutUpdateForItemsDiff(
+		expect(layout.getLayoutUpdateForItemsDiff(
 			{
 				firstShownItemIndex: 3,
 				lastShownItemIndex: 5,
@@ -126,7 +127,7 @@ describe('Layout', function() {
 				itemsCount: 5 + 5 + items.length,
 				columnsCount: 1
 			}
-		).should.deep.equal({
+		)).to.deep.equal({
 			firstShownItemIndex: 5 + 3,
 			lastShownItemIndex: 5 + 5,
 			beforeItemsHeight: (5 + 3) * (ITEM_HEIGHT + VERTICAL_SPACING),
@@ -164,7 +165,7 @@ describe('Layout', function() {
 			errors.push(error)
 		}
 
-		layout.getLayoutUpdateForItemsDiff(
+		expect(layout.getLayoutUpdateForItemsDiff(
 			{
 				firstShownItemIndex: 3,
 				lastShownItemIndex: 5,
@@ -180,7 +181,7 @@ describe('Layout', function() {
 				shouldRestoreScrollPosition: true,
 				onResetGridLayout: () => shouldResetGridLayout = true
 			}
-		).should.deep.equal({
+		)).to.deep.equal({
 			firstShownItemIndex: 0,
 			lastShownItemIndex: 5 + 5,
 			beforeItemsHeight: 0,
@@ -191,10 +192,10 @@ describe('Layout', function() {
 		// Use the default behavior of just `throw`-ing such errors.
 		global.VirtualScrollerCatchError = undefined
 		// Verify the errors that have been `throw`-n.
-		errors.length.should.equal(2)
-		errors[0].message.should.equal('[virtual-scroller] ~ Prepended items count 5 is not divisible by Columns Count 4 ~')
-		errors[1].message.should.equal('[virtual-scroller] Layout reset required')
+		expect(errors.length).to.equal(2)
+		expect(errors[0].message).to.equal('[virtual-scroller] ~ Prepended items count 5 is not divisible by Columns Count 4 ~')
+		expect(errors[1].message).to.equal('[virtual-scroller] Layout reset required')
 
-		shouldResetGridLayout.should.equal(true)
+		expect(shouldResetGridLayout).to.equal(true)
 	})
 })

package/source/Scroll.js

@@ -21,7 +21,7 @@ export default class Scroll {
 		getListTopOffset,
 		getPrerenderMargin,
 		onScrolledToTop,
-		waitForScrollingToStop
+		delayUnnecessaryRerenderUntilStopsScrolling
 	}) {
 		this.isInBypassMode = isInBypassMode
 		this.scrollableContainer = scrollableContainer
@@ -36,7 +36,7 @@ export default class Scroll {
 		this.getListTopOffset = getListTopOffset
 		this.getPrerenderMargin = getPrerenderMargin
 		this.onScrolledToTop = onScrolledToTop
-		this.waitForScrollingToStop = waitForScrollingToStop
+		this.delayUnnecessaryRerenderUntilStopsScrolling = delayUnnecessaryRerenderUntilStopsScrolling
 	}
 
 	start() {
@@ -151,22 +151,20 @@ export default class Scroll {
 				)
 			)
 
-		if (forceUpdate) {
+		if (forceUpdate || this.delayUnnecessaryRerenderUntilStopsScrolling === false) {
 			log('The user has scrolled far enough: perform a re-layout')
-		} else {
-			log('The user is scrolling: perform a re-layout when they stop scrolling')
-		}
-
-		if (forceUpdate || this.waitForScrollingToStop === false) {
 			return this.onScroll()
 		}
 
+		log('The user is scrolling: perform a re-layout when they stop scrolling')
+
 		// If a re-layout is already scheduled at the next "frame",
-		// don't schedule a "re-layout when user stops scrolling" timer.
+		// don't schedule a timer to wait for the user to stop scrolling.
 		if (this.isImmediateLayoutScheduled()) {
 			return
 		}
 
+		// Schedule a timer to wait for the user to stop scrolling.
 		this.shouldCallOnScrollListenerWhenStopsScrolling = true
 		this.watchOnStopScrolling()
 	}

package/source/VirtualScroller.constructor.js

@@ -50,8 +50,8 @@ export default function VirtualScrollerConstructor(
 		onItemInitialRender,
 		// `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
 		onItemFirstRender,
-		_useTimeoutInRenderLoop,
-		_waitForScrollingToStop,
+		delayRecursiveRenderUntilNextTick,
+		_delayUnnecessaryRerenderUntilStopsScrolling,
 		engine
 	} = options
 
@@ -136,7 +136,7 @@ export default function VirtualScrollerConstructor(
 	//  This can happen when a component repeatedly calls
 	//  `.setState()` inside `componentWillUpdate()` or `componentDidUpdate()`.
 	//  React limits the number of nested updates to prevent infinite loops."
-	this._useTimeoutInRenderLoop = _useTimeoutInRenderLoop
+	this._delayRecursiveRenderUntilNextTick = delayRecursiveRenderUntilNextTick
 
 	// `_getItemId()` function is used in `_getItemIndexByItemOrIndex()` function.
 	this._getItemId = getItemId
@@ -200,7 +200,7 @@ export default function VirtualScrollerConstructor(
 		measureItemsBatchSize,
 		initialScrollPosition,
 		onScrollPositionChange,
-		waitForScrollingToStop: _waitForScrollingToStop
+		delayUnnecessaryRerenderUntilStopsScrolling: _delayUnnecessaryRerenderUntilStopsScrolling
 	})
 
 	if (state) {
@@ -219,7 +219,7 @@ function createHelpers({
 	measureItemsBatchSize,
 	initialScrollPosition,
 	onScrollPositionChange,
-	waitForScrollingToStop
+	delayUnnecessaryRerenderUntilStopsScrolling
 }) {
 	this.itemsContainer = this.engine.createItemsContainer(
 		this.getItemsContainerElement
@@ -326,7 +326,7 @@ function createHelpers({
 		isInBypassMode: this.isInBypassMode,
 		scrollableContainer: this.scrollableContainer,
 		itemsContainer: this.itemsContainer,
-		waitForScrollingToStop,
+		delayUnnecessaryRerenderUntilStopsScrolling,
 		onScroll: ({ delayed } = {}) => {
 			this.onUpdateShownItemIndexes({
 				reason: delayed ? LAYOUT_REASON.STOPPED_SCROLLING : LAYOUT_REASON.SCROLL
@@ -350,7 +350,7 @@ function createHelpers({
 	if (this.engine.watchListTopOffset) {
 		this.listTopOffsetWatcher = this.engine.watchListTopOffset({
 			getListTopOffset: this.getListTopOffsetInsideScrollableContainer,
-			onListTopOffsetChange: ({ reason }) => this.onUpdateShownItemIndexes({
+			onListTopOffsetChange: () => this.onUpdateShownItemIndexes({
 				reason: LAYOUT_REASON.TOP_OFFSET_CHANGED
 			})
 		})

package/source/VirtualScroller.js

@@ -1,5 +1,6 @@
 import VirtualScrollerConstructor from './VirtualScroller.constructor.js'
 import { LAYOUT_REASON } from './Layout.js'
+import { unscheduleOnNextTick } from './utility/scheduleOnNextTick.js'
 import log, { warn, reportError } from './utility/debug.js'
 
 import {
@@ -184,7 +185,14 @@ export default class VirtualScroller {
 		}
 
 		// Cancel any scheduled layout.
+		// Any pending state update is discarded here.
 		this.cancelLayoutTimer({})
+
+		// Cancel any scheduled "recursive re-render duration" timer.
+		if (this._stateUpdateSequenceStartedAtResetTimer !== undefined) {
+			unscheduleOnNextTick(this._stateUpdateSequenceStartedAtResetTimer)
+			this._stateUpdateSequenceStartedAtResetTimer = undefined
+		}
 	}
 
 	hasToBeStarted() {

package/source/VirtualScroller.layout.js

@@ -1,19 +1,19 @@
-// For some weird reason, in Chrome, `setTimeout()` would lag up to a second (or more) behind.
-// Turns out, Chrome developers have deprecated `setTimeout()` API entirely without asking anyone.
-// Replacing `setTimeout()` with `requestAnimationFrame()` can work around that Chrome bug.
-// https://github.com/bvaughn/react-virtualized/issues/722
-import { setTimeout, clearTimeout } from 'request-animation-frame-timeout'
-
 import log, { warn, isDebug, reportError } from './utility/debug.js'
-import { LAYOUT_REASON } from './Layout.js'
+import { scheduleOnNextTick, unscheduleOnNextTick } from './utility/scheduleOnNextTick.js'
 
+import { LAYOUT_REASON } from './Layout.js'
 import ItemNotRenderedError from './ItemNotRenderedError.js'
 
 export default function() {
 	this.onUpdateShownItemIndexes = ({ reason, stateUpdate }) => {
-		// In case of "don't do anything".
+		// In case of "don't perform this particular re-layout
+		// because a more-priority one is already scheduled".
 		const skip = () => {
 			if (stateUpdate) {
+				// Don't update layout. Just update some state.
+				// `stateUpdate` isn't supposed to affect the layout in any way
+				// because it doesn't contain any properties that affect the rendering of the list.
+				// I.e. it doesn't contain properties like `beforeItemsHeight` or `afterItemsHeight`, etc.
 				this.updateState(stateUpdate)
 			}
 		}
@@ -21,13 +21,26 @@ export default function() {
 		// If new `items` have been set and are waiting to be applied,
 		// or if the viewport width has changed requiring a re-layout,
 		// then temporarily stop all other updates like "on scroll" updates.
-		// This prevents `state` being inconsistent, because, for example,
-		// both `setItems()` and this function could update `VirtualScroller` state
-		// and having them operate in parallel could result in incorrectly calculated
-		// `beforeItemsHeight` / `afterItemsHeight` / `firstShownItemIndex` /
-		// `lastShownItemIndex`, because, when operating in parallel, this function
-		// would have different `items` than the `setItems()` function, so their
-		// results could diverge.
+		//
+		// This prevents `state` from becoming inconsistent, because several
+		// "contenders" (layout reasons) could be attempting to update
+		// `VirtualScroller` state in parallel between two successive renders.
+		//
+		// For example, both `VirtualScroller.setItems()` and `VirtualScroller.scroll.onScroll()`
+		// "contenders" could be attempting to update `VirtualScroller` state in parallel,
+		// and the layout calculated by one of them would overwrite the layout calculated by another.
+		//
+		// Which one should have the priority in such case then?
+		// In this specific example, `VirtualScroller.setItems()` should be the one
+		// because only it knows the correct new `items` whereas other "contenders"
+		// have the old stale `items`.
+		//
+		// Another example of a "contender" that should have a priority is
+		// "on list width has changed" handler because only it has access
+		// to the correct new width of the list rather than the old stale width.
+		//
+		// So in these two "priority" cases any other re-layout should be ignored.
+		//
 		if (this.newItemsWillBeRendered || this.widthHasChanged || this._isResizing) {
 			return skip()
 		}
@@ -37,11 +50,12 @@ export default function() {
 			return skip()
 		}
 
-		// Cancel a "re-layout when user stops scrolling" timer.
+		// Cancel a scheduled "re-layout when user stops scrolling" timer
+		// because a re-layout will be performed here now.
 		this.scroll.cancelScheduledLayout()
 
-		// Cancel a re-layout that is scheduled to run at the next "frame",
-		// because a re-layout will be performed right now.
+		// Cancel a scheduled re-layout that is scheduled to run at the next "frame",
+		// because a re-layout will be performed here now.
 		stateUpdate = this.cancelLayoutTimer({ stateUpdate })
 
 		// Perform a re-layout.
@@ -126,7 +140,24 @@ export default function() {
 		if (layoutDuration < SLOW_LAYOUT_DURATION) {
 			// log('Calculated in', layoutDuration, 'ms')
 		} else {
-			warn('Layout calculated in', layoutDuration, 'ms')
+			// Getting this warning would mean that for a given (large) count of items,
+			// calculating `beforeItemsHeight` or `afterItemsHeight` requires too much time
+			// in order to iterate over all not-currently-visible items to add up their heights.
+			//
+			// Because layout calculation is a blocking procedure, it "freezes" the application
+			// for a given amount of milliseconds. If the amount of those milliseconds is longer
+			// than 16ms, frames are being dropped in a 60fps scenario.
+			// Modern phones even use 120fps as a baseline, so the timeframe requirement
+			// gets even more strict.
+			//
+			// What could be a way of dealing with this?
+			//
+			// * The code could cache clustered item heights in order to perform less add-up operations.
+			//   For example, the code could cache the total height of items 1..100, 101..200, etc.
+			//   Then 1..1000, 1001..2000, etc. Then 1..10000, 10001..20000, etc. So the clusters
+			//   would just get progressively larger as more `items` are added.
+			//
+			warn('Layout calculation time too high:', layoutDuration, 'ms')
 		}
 		if (this.getColumnsCount()) {
 			log('Columns count', this.getColumnsCount())
@@ -135,7 +166,7 @@ export default function() {
 		log('Last shown item index', lastShownItemIndex)
 		log('Before items height', beforeItemsHeight)
 		log('After items height (actual or estimated)', afterItemsHeight)
-		log('Average item height (used for estimated after items height calculation)', this.getAverageItemHeight())
+		log('Average item height (will be used to calculate estimated "after items height")', this.getAverageItemHeight())
 		if (isDebug()) {
 			log('Item heights', this.getState().itemHeights.slice())
 			log('Item states', this.getState().itemStates.slice())
@@ -425,7 +456,7 @@ export default function() {
 		if (previousHeight === undefined) {
 			// There're valid cases when the item still hasn't been measured and `onItemHeightDidChange(item)`
 			// function was called for it. That's because measuring items is only done after the `VirtualScroller`
-			// has `start()`ed. But it's not neccessarily `start()`ed by the time it has been rendered (mounted).
+			// has `start()`ed. But it's not necessarily `start()`ed by the time it has been rendered (mounted).
 			// For example, the React component `<VirtualScroller/>` provides an `readyToStart={false}` property
 			// in order to let the application finish initializing itself before starting the `VirtualScroller`.
 			// So there're legitimate cases when a `VirtualScroller` is already rendered but is not `start()`ed yet.
@@ -572,7 +603,7 @@ export default function() {
 
 	this.cancelLayoutTimer = ({ stateUpdate }) => {
 		if (this.layoutTimer) {
-			clearTimeout(this.layoutTimer)
+			unscheduleOnNextTick(this.layoutTimer)
 			this.layoutTimer = undefined
 			// Merge state updates.
 			if (stateUpdate || this.layoutTimerStateUpdate) {
@@ -590,15 +621,20 @@ export default function() {
 
 	this.scheduleLayoutTimer = ({ reason, stateUpdate }) => {
 		this.layoutTimerStateUpdate = stateUpdate
-		this.layoutTimer = setTimeout(() => {
+		this.layoutTimer = scheduleOnNextTick(() => {
 			this.layoutTimerStateUpdate = undefined
 			this.layoutTimer = undefined
 			this.onUpdateShownItemIndexes({
 				reason,
 				stateUpdate
 			})
-		}, 0)
+		})
 	}
 }
 
-const SLOW_LAYOUT_DURATION = 15 // in milliseconds.
+const FPS = 60 // though 120 fps is common on smartphones these days.
+const FRAME_DURATION = 1000 / FPS // in milliseconds
+
+// Layout is considered "too slow" when it "blocks" the "main thread"
+// for so long that it starts causing "frame drops".
+const SLOW_LAYOUT_DURATION = FRAME_DURATION

package/source/VirtualScroller.onRender.js

@@ -204,11 +204,16 @@ export default function() {
 		}
 
 		if (layoutUpdateReason) {
+			// Update layout.
 			updateStateRightAfterRender.call(this, {
 				stateUpdate,
 				reason: layoutUpdateReason
 			})
 		} else if (stateUpdate) {
+			// Don't update layout. Just update some state.
+			// `stateUpdate` isn't supposed to affect the layout in any way
+			// because it doesn't contain any properties that affect the rendering of the list.
+			// I.e. it doesn't contain properties like `beforeItemsHeight` or `afterItemsHeight`, etc.
 			this.updateState(stateUpdate)
 		} else {
 			log('~ Finished Layout ~')
@@ -327,12 +332,25 @@ export default function() {
 		reason,
 		stateUpdate
 	}) {
-		// In React, `setTimeout()` is used to prevent a React error:
+		// React doesn't like it when `setState()` is called during render:
+		//
 		// "Maximum update depth exceeded.
 		//  This can happen when a component repeatedly calls
 		//  `.updateState()` inside `componentWillUpdate()` or `componentDidUpdate()`.
 		//  React limits the number of nested updates to prevent infinite loops."
-		if (this._useTimeoutInRenderLoop) {
+		//
+		// To work around that, in React it always prefers a delayed state update
+		// over an immediate state update right after a prevous state update.
+		//
+		// Another case when it should introduce an artificial momentary delay
+		// in a chain of immediate "syncrhonous" re-renders is when such chain
+		// of re-renders has been freezing the UI for far too long.
+		//
+		if (this._delayRecursiveRenderUntilNextTick || (
+			this._delayRecursiveRenderUntilNextTick !== false &&
+			this._stateUpdateSequenceStartedAt !== undefined &&
+			Date.now() - this._stateUpdateSequenceStartedAt > UNINTERRUPTED_RECURSIVE_STATE_UPDATE_SEQUENCE_MAX_ALLOWED_DURATION
+		)) {
 			// Cancel a previously scheduled re-layout.
 			stateUpdate = this.cancelLayoutTimer({ stateUpdate })
 			// Schedule a new re-layout.
@@ -395,4 +413,12 @@ export default function() {
 			widthHasChanged
 		}
 	}
-}
+}
+
+const FPS = 60 // though 120 fps is common on smartphones these days.
+const FRAME_DURATION = 1000 / FPS // in milliseconds
+
+// Allow recursive "synchronous" re-renders
+// until they start "blocking" the "main thread"
+// for so long that it starts causing "frame drops".
+const UNINTERRUPTED_RECURSIVE_STATE_UPDATE_SEQUENCE_MAX_ALLOWED_DURATION = FRAME_DURATION

package/source/VirtualScroller.state.js

@@ -2,6 +2,7 @@ import fillArray from './utility/fillArray.js'
 import log, { warn, isDebug, reportError } from './utility/debug.js'
 import { cleanUpBeforeResizeState } from './BeforeResize.js'
 import getStateSnapshot from './utility/getStateSnapshot.js'
+import { scheduleOnNextTick } from './utility/scheduleOnNextTick.js'
 
 // There're three main places where state is updated:
 //
@@ -84,6 +85,43 @@ export default function createStateHelpers({
 			log(getStateSnapshot(stateUpdate))
 		}
 
+		// Start tracking the time that elapsed since the start of a state update,
+		// because by default a state update causes a "syncrhonous" re-render
+		// which could, in turn, require an immediate follow-up re-render,
+		// which could again require an immediate follow-up re-render, etc,
+		// causing a "synchronous" re-render recursion, potentially freezing the UI.
+		//
+		// An avalanche of immediate follow-up re-renders usually happens
+		// when there're a lot of items in the list — hundreds of thousands —
+		// and the user suddenly scrolls down at the very bottom of the list
+		// causing a long chain of re-renders when the list starts gradually rendering
+		// all the items from top to bottom until it gets to the bottom of the list.
+		//
+		// In order to prevent freezing the UI in such cases, and to provide the user
+		// with the ability to break away from this kind of recursion, `VirtualScroller`
+		// has to introduce a momentary delay between successive "synchronous" re-renders.
+		//
+		// At the same time, it should only introduce such artificial momentary delay
+		// when it's really required in order to not hinder the list's performance unnecessarily.
+		//
+		// A kind of "golen mean" then is to measure the time that a succession of
+		// "synchronous" re-renders has already been going for, and interrupt it
+		// with a momentary delay if it has been going on for too long.
+		// How much's too long? Well, it could be a duration of a single frame.
+		//
+		// P.S. If this `.updateState()` call was initiated from another `.updateState()` call,
+		// i.e. if it was done recursively, then the time tracking will have already been started.
+		//
+		if (this._stateUpdateSequenceStartedAt === undefined) {
+			this._stateUpdateSequenceStartedAt = Date.now()
+			// Automatically reset `this._stateUpdateSequenceStartedAt` variable on "next tick",
+			// i.e. outside of a "synchronous" recursion.
+			this._stateUpdateSequenceStartedAtResetTimer = scheduleOnNextTick(() => {
+				this._stateUpdateSequenceStartedAtResetTimer = undefined
+				this._stateUpdateSequenceStartedAt = undefined
+			})
+		}
+
 		// Ensure that a non-initial `stateUpdate` can only contain an `items`
 		// property when it comes from a `setItems()` call.
 		if (stateUpdate.items) {

package/source/react/useCreateVirtualScroller.js

@@ -36,7 +36,7 @@ export default function useVirtualScroller({
 			getItemsContainerElement,
 			items,
 			{
-				_useTimeoutInRenderLoop: true,
+				delayRecursiveRenderUntilNextTick: true,
 				// `estimatedItemHeight` is deprecated, use `getEstimatedItemHeight()` instead.
 				estimatedItemHeight,
 				getEstimatedItemHeight,

package/source/test/VirtualScroller.js

@@ -1,3 +1,6 @@
+import { describe, it } from 'mocha'
+import { expect } from 'chai'
+
 import VirtualScroller from '../VirtualScroller.js'
 import Engine from './Engine.js'
 
@@ -89,7 +92,8 @@ export default class TestVirtualScroller {
 		this.virtualScroller = new VirtualScroller(getItemsContainerElement, items, {
 			scrollableContainer: scrollableContainerElement,
 			engine: Engine,
-			_waitForScrollingToStop: false,
+			_delayUnnecessaryRerenderUntilStopsScrolling: false,
+			delayRecursiveRenderUntilNextTick: false,
 			getItemId,
 			getColumnsCount,
 			state: initialState,
@@ -151,7 +155,7 @@ export default class TestVirtualScroller {
 
 	verifyState(expectedState) {
 		// `mocha`/`chai`.
-		this.virtualScroller.getState().should.deep.include(expectedState)
+		expect(this.virtualScroller.getState()).to.deep.include(expectedState)
 	}
 
 	expectStateUpdate(stateUpdate, callback) {

package/source/utility/px.test.js

@@ -1,9 +1,12 @@
+import { describe, it } from 'mocha'
+import { expect } from 'chai'
+
 import px from './px.js'
 
 describe('utility/px', function() {
 	it('should truncate px values', function() {
-		px(0).should.equal('0px')
-		px(1).should.equal('1px')
-		px(1.2345).should.equal('1.23px')
+		expect(px(0)).to.equal('0px')
+		expect(px(1)).to.equal('1px')
+		expect(px(1.2345)).to.equal('1.23px')
 	})
 })

package/source/utility/scheduleOnNextTick.js

@@ -0,0 +1,16 @@
+// For some weird reason, in Chrome, `setTimeout()` would lag up to a second (or more) behind.
+// Turns out, Chrome developers have deprecated `setTimeout()` API entirely without asking anyone.
+// Replacing `setTimeout()` with `requestAnimationFrame()` can work around that Chrome bug.
+// https://github.com/bvaughn/react-virtualized/issues/722
+import { setTimeout, clearTimeout } from 'request-animation-frame-timeout'
+
+// This function could also use `requestAnimationFrame()` function
+// but `setTimeout()` with `0` delay has practically the same effect
+// and at the same time it's more universally supported, e.g. in Node.js.
+export function scheduleOnNextTick(func) {
+	return setTimeout(func, 0)
+}
+
+export function unscheduleOnNextTick(timerId) {
+	clearTimeout(timerId)
+}