virtual-scroller 1.11.2 → 1.12.0

package/source/DOM/VirtualScroller.js

@@ -141,8 +141,17 @@ export default class VirtualScroller {
     }
   }
 
+  /**
+   * @deprecated
+   * `.onItemHeightChange()` has been renamed to `.onItemHeightDidChange()`.
+   */
   onItemHeightChange(i) {
-    this.virtualScroller.onItemHeightChange(i)
+    warn('`.onItemHeightChange(i)` method was renamed to `.onItemHeightDidChange(i)`')
+    this.onItemHeightDidChange(i)
+  }
+
+  onItemHeightDidChange(i) {
+    this.virtualScroller.onItemHeightDidChange(i)
   }
 
   setItemState(i, newState) {
@@ -154,6 +163,7 @@ export default class VirtualScroller {
    * `.updateItems()` has been renamed to `.setItems()`.
    */
   updateItems(newItems, options) {
+    warn('`.updateItems()` method was renamed to `.setItems(i)`')
     this.setItems(newItems, options)
   }
 

package/source/ItemHeights.js

@@ -119,7 +119,7 @@ export default class ItemHeights {
 			// Measure item heights that haven't been measured previously.
 			// Don't re-measure item heights that have been measured previously.
 			// The rationale is that developers are supposed to manually call
-			// `.onItemHeightChange()` every time an item's height changes.
+			// `.onItemHeightDidChange()` immediately every time an item's height has changed.
 			// If developers don't neglect that rule, item heights won't
 			// change unexpectedly.
 			if (this._get(i) === undefined) {
@@ -169,7 +169,7 @@ export default class ItemHeights {
 				const previousHeight = this._get(i)
 				const height = this._measureItemHeight(i, firstShownItemIndex)
 				if (previousHeight !== height) {
-					warn('Item index', i, 'height changed unexpectedly: it was', previousHeight, 'before, but now it is', height, '. An item\'s height is allowed to change only in two cases: when the item\'s "state" changes and the developer calls `setItemState(i, newState)`, or when the item\'s height changes for any reason and the developer calls `onItemHeightChange(i)`. Perhaps you forgot to persist the item\'s "state" by calling `setItemState(i, newState)` when it changed, and that "state" got lost when the item element was unmounted, which resulted in a different height when the item was shown again having its "state" reset.')
+					warn('Item index', i, 'height changed unexpectedly: it was', previousHeight, 'before, but now it is', height, '. An item\'s height is allowed to change only in two cases: when the item\'s "state" changes and the developer calls `setItemState(i, newState)`, or when the item\'s height changes for any reason and the developer calls `onItemHeightDidChange(i)` right after that happens. Perhaps you forgot to persist the item\'s "state" by calling `setItemState(i, newState)` when it changed, and that "state" got lost when the item element was unmounted, which resulted in a different height when the item was shown again having its "state" reset.')
 					// Update the item's height as an attempt to fix things.
 					this._set(i, height)
 				}
@@ -189,18 +189,18 @@ export default class ItemHeights {
 	remeasureItemHeight(i, firstShownItemIndex) {
 		const previousHeight = this._get(i)
 		const height = this._measureItemHeight(i, firstShownItemIndex)
-		// // Because this function is called from `.onItemHeightChange()`,
+		// // Because this function is called from `.onItemHeightDidChange()`,
 		// // there're no guarantees in which circumstances a developer calls it,
 		// // and for which item indexes.
 		// // Therefore, to guard against cases of incorrect usage,
 		// // this function won't crash anything if the item isn't rendered
 		// // or hasn't been previously rendered.
 		// if (height !== undefined) {
-		// 	reportError(`"onItemHeightChange()" has been called for item ${i}, but that item isn't rendered.`)
+		// 	reportError(`"onItemHeightDidChange()" has been called for item ${i}, but that item isn't currently rendered.`)
 		// 	return
 		// }
 		// if (previousHeight === undefined) {
-		// 	reportError(`"onItemHeightChange()" has been called for item ${i}, but that item hasn't been rendered before.`)
+		// 	reportError(`"onItemHeightDidChange()" has been called for item ${i}, but that item hasn't been rendered before.`)
 		// 	return
 		// }
 		this._set(i, height)

package/source/ItemNotRenderedError.js

@@ -0,0 +1,16 @@
+export default class ItemNotRenderedError extends Error {
+	constructor({
+		renderedElementIndex,
+		renderedElementsCount,
+		message
+	}) {
+		super(message || getDefaultMessage({ renderedElementIndex, renderedElementsCount }))
+	}
+}
+
+function getDefaultMessage({
+	renderedElementIndex,
+	renderedElementsCount
+}) {
+	return `Element with index ${renderedElementIndex} was not found in the list of Rendered Item Elements in the Items Container of Virtual Scroller. There're only ${renderedElementsCount} Elements there.`
+}

package/source/Layout.test.js

@@ -148,6 +148,10 @@ describe('Layout', function() {
 
 		let shouldResetGridLayout
 
+		const errors = []
+
+		global.VirtualScrollerCatchError = (error) => errors.push(error)
+
 		layout.getLayoutUpdateForItemsDiff(
 			{
 				firstShownItemIndex: 3,
@@ -171,6 +175,11 @@ describe('Layout', function() {
 			afterItemsHeight: 5 * (ITEM_HEIGHT + VERTICAL_SPACING)
 		})
 
+		global.VirtualScrollerCatchError = undefined
+		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')
+
 		shouldResetGridLayout.should.equal(true)
 	})
 })

package/source/VirtualScroller.js

@@ -1,7 +1,7 @@
 import VirtualScrollerConstructor from './VirtualScroller.constructor.js'
 import { hasTbodyStyles, addTbodyStyles } from './DOM/tbody.js'
 import { LAYOUT_REASON } from './Layout.js'
-import log from './utility/debug.js'
+import log, { warn } from './utility/debug.js'
 
 export default class VirtualScroller {
 	/**
@@ -35,6 +35,8 @@ export default class VirtualScroller {
 		const isRestart = this._isActive === false
 
 		if (!isRestart) {
+			this.waitingForRender = true
+
 			// If no custom state storage has been configured, use the default one.
 			// Also sets the initial state.
 			if (!this._usesCustomStateStorage) {
@@ -205,13 +207,22 @@ export default class VirtualScroller {
 		return this.getListTopOffsetInsideScrollableContainer() + itemTopOffsetInList
 	}
 
+	/**
+	 * @deprecated
+	 * `.onItemHeightChange()` has been renamed to `.onItemHeightDidChange()`.
+	 */
+	onItemHeightChange(i) {
+		warn('`.onItemHeightChange(i)` method was renamed to `.onItemHeightDidChange(i)`')
+		this.onItemHeightDidChange(i)
+	}
+
 	/**
 	 * Forces a re-measure of an item's height.
 	 * @param  {number} i — Item index
 	 */
-	onItemHeightChange(i) {
+	onItemHeightDidChange(i) {
 		this.hasToBeStarted()
-		this._onItemHeightChange(i)
+		this._onItemHeightDidChange(i)
 	}
 
 	/**

package/source/VirtualScroller.layout.js

@@ -7,6 +7,8 @@ import { setTimeout, clearTimeout } from 'request-animation-frame-timeout'
 import log, { warn, isDebug, reportError } from './utility/debug.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".
@@ -99,7 +101,7 @@ export default function() {
 		// or an "Expand YouTube video" button, which would result
 		// in the actual height of the list item being different
 		// from what has been initially measured in `this.itemHeights[i]`,
-		// if the developer didn't call `.setItemState(i, newState)` and `.onItemHeightChange(i)`.
+		// if the developer didn't call `.setItemState(i, newState)` and `.onItemHeightDidChange(i)`.
 		if (!validateWillBeHiddenItemHeightsAreAccurate.call(this, firstShownItemIndex, lastShownItemIndex)) {
 			log('~ Because some of the will-be-hidden item heights (listed above) have changed since they\'ve last been measured, redo layout. ~')
 			// Redo layout, now with the correct item heights.
@@ -149,6 +151,9 @@ export default function() {
 
 		// Set `this.firstNonMeasuredItemIndex`.
 		this.firstNonMeasuredItemIndex = firstNonMeasuredItemIndex
+		// if (firstNonMeasuredItemIndex !== undefined) {
+		// 	log('Non-measured item index that will be measured at next layout', firstNonMeasuredItemIndex)
+		// }
 
 		// Set "previously calculated layout".
 		//
@@ -172,9 +177,9 @@ export default function() {
 			// Instead of using a `this.previouslyCalculatedLayout` instance variable,
 			// this code could use `this.getState()` because it reflects what's currently on screen,
 			// but there's a single edge case when it could go out of sync —
-			// updating item heights externally via `.onItemHeightChange(i)`.
+			// updating item heights externally via `.onItemHeightDidChange(i)`.
 			//
-			// If, for example, an item height was updated externally via `.onItemHeightChange(i)`
+			// If, for example, an item height was updated externally via `.onItemHeightDidChange(i)`
 			// then `this.getState().itemHeights` would get updated immediately but
 			// `this.getState().beforeItemsHeight` or `this.getState().afterItemsHeight`
 			// would still correspond to the previous item height, so those would be "stale".
@@ -269,7 +274,7 @@ export default function() {
 	 * or an "Expand YouTube video" button, which would result
 	 * in the actual height of the list item being different
 	 * from what has been initially measured in `this.itemHeights[i]`,
-	 * if the developer didn't call `.setItemState(i, newState)` and `.onItemHeightChange(i)`.
+	 * if the developer didn't call `.setItemState(i, newState)` and `.onItemHeightDidChange(i)`.
 	 */
 	function validateWillBeHiddenItemHeightsAreAccurate(firstShownItemIndex, lastShownItemIndex) {
 		let isValid = true
@@ -281,26 +286,26 @@ export default function() {
 				// The item will be hidden. Re-measure its height.
 				// The rationale is that there could be a situation when an item's
 				// height has changed, and the developer has properly added an
-				// `.onItemHeightChange(i)` call to notify `VirtualScroller`
+				// `.onItemHeightDidChange(i)` call to notify `VirtualScroller`
 				// about that change, but at the same time that wouldn't work.
 				// For example, suppose there's a list of several items on a page,
 				// and those items are in "minimized" state (having height 100px).
 				// Then, a user clicks an "Expand all items" button, and all items
 				// in the list are expanded (expanded item height is gonna be 700px).
-				// `VirtualScroller` demands that `.onItemHeightChange(i)` is called
+				// `VirtualScroller` demands that `.onItemHeightDidChange(i)` is called
 				// in such cases, and the developer has properly added the code to do that.
 				// So, if there were 10 "minimized" items visible on a page, then there
-				// will be 10 individual `.onItemHeightChange(i)` calls. No issues so far.
-				// But, as the first `.onItemHeightChange(i)` call executes, it immediately
+				// will be 10 individual `.onItemHeightDidChange(i)` calls. No issues so far.
+				// But, as the first `.onItemHeightDidChange(i)` call executes, it immediately
 				// ("synchronously") triggers a re-layout, and that re-layout finds out
 				// that now, because the first item is big, it occupies most of the screen
 				// space, and only the first 3 items are visible on screen instead of 10,
 				// and so it leaves the first 3 items mounted and unmounts the rest 7.
 				// Then, after `VirtualScroller` has rerendered, the code returns to
-				// where it was executing, and calls `.onItemHeightChange(i)` for the
+				// where it was executing, and calls `.onItemHeightDidChange(i)` for the
 				// second item. It also triggers an immediate re-layout that finds out
 				// that only the first 2 items are visible on screen, and it unmounts
-				// the third one too. After that, it calls `.onItemHeightChange(i)`
+				// the third one too. After that, it calls `.onItemHeightDidChange(i)`
 				// for the third item, but that item is no longer rendered, so its height
 				// can't be measured, and the same's for all the rest of the original 10 items.
 				// So, even though the developer has written their code properly, the
@@ -318,7 +323,7 @@ export default function() {
 						updatePreviouslyCalculatedLayoutOnItemHeightChange.call(this, i, previouslyMeasuredItemHeight, actualItemHeight)
 					}
 					isValid = false
-					warn('Item index', i, 'is no longer visible and will be unmounted. Its height has changed from', previouslyMeasuredItemHeight, 'to', actualItemHeight, 'since it was last measured. This is not necessarily a bug, and could happen, for example, on screen width change, or when there\'re several `onItemHeightChange(i)` calls issued at the same time, and the first one triggers a re-layout before the rest of them have had a chance to be executed.')
+					warn('Item index', i, 'is no longer visible and will be unmounted. Its height has changed from', previouslyMeasuredItemHeight, 'to', actualItemHeight, 'since it was last measured. This is not necessarily a bug, and could happen, for example, on screen width change, or when there\'re several `onItemHeightDidChange(i)` calls issued at the same time, and the first one triggers a re-layout before the rest of them have had a chance to be executed.')
 				}
 			}
 			i++
@@ -340,20 +345,21 @@ export default function() {
 	// rather than from scratch, which would be an optimization.
 	//
 	function updatePreviouslyCalculatedLayoutOnItemHeightChange(i, previousHeight, newHeight) {
-		if (this.previouslyCalculatedLayout) {
+		const prevLayout = this.previouslyCalculatedLayout
+		if (prevLayout) {
 			const heightDifference = newHeight - previousHeight
-			if (i < this.previouslyCalculatedLayout.firstShownItemIndex) {
-				// Patch `this.previouslyCalculatedLayout`'s `.beforeItemsHeight`.
-				this.previouslyCalculatedLayout.beforeItemsHeight += heightDifference
-			} else if (i > this.previouslyCalculatedLayout.lastShownItemIndex) {
-				// Could patch `.afterItemsHeight` of `this.previouslyCalculatedLayout` here,
-				// if `.afterItemsHeight` property existed in `this.previouslyCalculatedLayout`.
-				if (this.previouslyCalculatedLayout.afterItemsHeight !== undefined) {
-					this.previouslyCalculatedLayout.afterItemsHeight += heightDifference
+			if (i < prevLayout.firstShownItemIndex) {
+				// Patch `prevLayout`'s `.beforeItemsHeight`.
+				prevLayout.beforeItemsHeight += heightDifference
+			} else if (i > prevLayout.lastShownItemIndex) {
+				// Could patch `.afterItemsHeight` of `prevLayout` here,
+				// if `.afterItemsHeight` property existed in `prevLayout`.
+				if (prevLayout.afterItemsHeight !== undefined) {
+					prevLayout.afterItemsHeight += heightDifference
 				}
 			} else {
-				// Patch `this.previouslyCalculatedLayout`'s shown items height.
-				this.previouslyCalculatedLayout.shownItemsHeight += newHeight - previousHeight
+				// Patch `prevLayout`'s shown items height.
+				prevLayout.shownItemsHeight += newHeight - previousHeight
 			}
 		}
 	}
@@ -370,8 +376,8 @@ export default function() {
 		return listTopOffset
 	}
 
-	this._onItemHeightChange = (i) => {
-		log('~ Re-measure item height ~')
+	this._onItemHeightDidChange = (i) => {
+		log('~ On Item Height Did Change was called ~')
 		log('Item index', i)
 
 		const {
@@ -383,53 +389,86 @@ export default function() {
 		// Check if the item is still rendered.
 		if (!(i >= firstShownItemIndex && i <= lastShownItemIndex)) {
 			// There could be valid cases when an item is no longer rendered
-			// by the time `.onItemHeightChange(i)` gets called.
+			// by the time `.onItemHeightDidChange(i)` gets called.
 			// For example, suppose there's a list of several items on a page,
 			// and those items are in "minimized" state (having height 100px).
 			// Then, a user clicks an "Expand all items" button, and all items
 			// in the list are expanded (expanded item height is gonna be 700px).
-			// `VirtualScroller` demands that `.onItemHeightChange(i)` is called
+			// `VirtualScroller` demands that `.onItemHeightDidChange(i)` is called
 			// in such cases, and the developer has properly added the code to do that.
 			// So, if there were 10 "minimized" items visible on a page, then there
-			// will be 10 individual `.onItemHeightChange(i)` calls. No issues so far.
-			// But, as the first `.onItemHeightChange(i)` call executes, it immediately
+			// will be 10 individual `.onItemHeightDidChange(i)` calls. No issues so far.
+			// But, as the first `.onItemHeightDidChange(i)` call executes, it immediately
 			// ("synchronously") triggers a re-layout, and that re-layout finds out
 			// that now, because the first item is big, it occupies most of the screen
 			// space, and only the first 3 items are visible on screen instead of 10,
 			// and so it leaves the first 3 items mounted and unmounts the rest 7.
 			// Then, after `VirtualScroller` has rerendered, the code returns to
-			// where it was executing, and calls `.onItemHeightChange(i)` for the
+			// where it was executing, and calls `.onItemHeightDidChange(i)` for the
 			// second item. It also triggers an immediate re-layout that finds out
 			// that only the first 2 items are visible on screen, and it unmounts
-			// the third one too. After that, it calls `.onItemHeightChange(i)`
+			// the third one too. After that, it calls `.onItemHeightDidChange(i)`
 			// for the third item, but that item is no longer rendered, so its height
 			// can't be measured, and the same's for all the rest of the original 10 items.
 			// So, even though the developer has written their code properly, there're
 			// still situations when the item could be no longer rendered by the time
-			// `.onItemHeightChange(i)` gets called.
-			return warn('The item is no longer rendered. This is not necessarily a bug, and could happen, for example, when when a developer calls `onItemHeightChange(i)` while looping through a batch of items.')
+			// `.onItemHeightDidChange(i)` gets called.
+			return warn('The item is no longer rendered. This is not necessarily a bug, and could happen, for example, when when a developer calls `onItemHeightDidChange(i)` while looping through a batch of items.')
 		}
 
 		const previousHeight = itemHeights[i]
 		if (previousHeight === undefined) {
-			return reportError(`"onItemHeightChange()" has been called for item ${i}, but that item hasn't been rendered before.`)
+			return reportError(`"onItemHeightDidChange()" has been called for item index ${i} but the item hasn't been rendered before.`)
 		}
 
-		const newHeight = remeasureItemHeight.call(this, i)
+		log('~ Re-measure item height ~')
+
+		let newHeight
+
+		try {
+			newHeight = remeasureItemHeight.call(this, i)
+		} catch (error) {
+			// Successfully finishing an `onItemHeightDidChange(i)` call is not considered
+			// critical for `VirtualScroller`'s operation, so such errors could be ignored.
+			if (error instanceof ItemNotRenderedError) {
+				return reportError(`"onItemHeightDidChange()" has been called for item index ${i} but the item is not currently rendered and can\'t be measured. The exact error was: ${error.message}`)
+			}
+		}
 
 		log('Previous height', previousHeight)
 		log('New height', newHeight)
 
 		if (previousHeight !== newHeight) {
-			log('~ Item height has changed ~')
+			log('~ Item height has changed. Should update layout. ~')
 
-			// Update or reset previously calculated layout.
+			// Update or reset a previously calculated layout
+			// so that the "diff"s based on that layout in the future
+			// produce correct results.
 			updatePreviouslyCalculatedLayoutOnItemHeightChange.call(this, i, previousHeight, newHeight)
 
 			// Recalculate layout.
-			this.onUpdateShownItemIndexes({ reason: LAYOUT_REASON.ITEM_HEIGHT_CHANGED })
+			//
+			// If the `VirtualScroller` is already waiting for a state update to be rendered,
+			// delay `onItemHeightDidChange(i)`'s re-layout until that state update is rendered.
+			// The reason is that React `<VirtualScroller/>`'s `onHeightDidChange()` is meant to
+			// be called inside `useLayoutEffect()` hook. Due to how React is implemented internally,
+			// that might happen in the middle of the currently pending `setState()` operation
+			// being applied, resulting in weird "race condition" bugs.
+			//
+			if (this.waitingForRender) {
+				log('~ Another state update is already waiting to be rendered. Delay the layout update until then. ~')
+				this.updateLayoutAfterRenderBecauseItemHeightChanged = true
+			} else {
+				this.onUpdateShownItemIndexes({ reason: LAYOUT_REASON.ITEM_HEIGHT_CHANGED })
+			}
 
-			// Schedule the item height update for after the new items have been rendered.
+			// If there was a request for `setState()` with new `items`, then the changes
+			// to `currentState.itemHeights[]` made above in a `remeasureItemHeight()` call
+			// would be overwritten when that pending `setState()` call gets applied.
+			// To fix that, the updates to current `itemHeights[]` are noted in
+			// `this.itemHeightsThatChangedWhileNewItemsWereBeingRendered` variable.
+			// That variable is then checked when the `setState()` call with the new `items`
+			// has been updated.
 			if (this.newItemsWillBeRendered) {
 				if (!this.itemHeightsThatChangedWhileNewItemsWereBeingRendered) {
 					this.itemHeightsThatChangedWhileNewItemsWereBeingRendered = {}

package/source/VirtualScroller.onRender.js

@@ -1,4 +1,4 @@
-import log, { warn, isDebug } from './utility/debug.js'
+import log, { warn, reportError, isDebug } from './utility/debug.js'
 import getStateSnapshot from './utility/getStateSnapshot.js'
 import shallowEqual from './utility/shallowEqual.js'
 import { LAYOUT_REASON } from './Layout.js'
@@ -11,6 +11,8 @@ export default function() {
 	 * @param  {object} [prevState]
 	 */
 	this._onRender = (newState, prevState) => {
+		this.waitingForRender = false
+
 		log('~ Rendered ~')
 		if (isDebug()) {
 			log('State', getStateSnapshot(newState))
@@ -33,19 +35,58 @@ export default function() {
 			)
 		}
 
-		if (!prevState) {
-			return
+		// `this.mostRecentlySetState` checks that state management behavior is correct:
+		// that in situations when there're multiple new states waiting to be set,
+		// only the latest one gets applied.
+		// It keeps the code simpler and prevents possible race condition bugs.
+		// For example, `VirtualScroller` keeps track of its latest requested
+		// state update in different instance variable flags which assume that
+		// only that latest requested state update gets actually applied.
+		//
+		// This check should also be performed for the initial render in order to
+		// guarantee that no potentially incorrect state update goes unnoticed.
+		// Incorrect state updates could happen when `VirtualScroller` state
+		// is managed externally by passing `getState()`/`updateState()` options.
+		//
+		// Perform the check only when `this.mostRecentSetStateValue` is defined.
+		// `this.mostRecentSetStateValue` is normally gonna be `undefined` at the initial render
+		// because the initial state is not set by calling `this.updateState()`.
+		// At the same time, it is possible that the initial render is delayed
+		// for whatever reason, and `this.updateState()` gets called before the initial render,
+		// so `this.mostRecentSetStateValue` could also be defined at the initial render,
+		// in which case the check should be performed.
+		//
+		if (this.mostRecentSetStateValue) {
+			// "Shallow equality" is used here instead of "strict equality"
+			// because a developer might choose to supply an `updateState()` function
+			// rather than a `setState()` function, in which case the `updateState()` function
+			// would construct its own state object.
+			if (!shallowEqual(newState, this.mostRecentSetStateValue)) {
+				warn('The most recent state that was set', getStateSnapshot(this.mostRecentSetStateValue))
+				reportError('The state that has been rendered is not the most recent one that was set')
+			}
 		}
 
 		// `this.resetStateUpdateFlags()` must be called before calling
 		// `this.measureItemHeightsAndSpacing()`.
 		const {
 			nonMeasuredItemsHaveBeenRendered,
+			itemHeightHasChanged,
 			widthHasChanged
 		} = resetStateUpdateFlags.call(this)
 
 		let layoutUpdateReason
 
+		if (this.updateLayoutAfterRenderBecauseItemHeightChanged) {
+			layoutUpdateReason = LAYOUT_REASON.ITEM_HEIGHT_CHANGED
+		}
+
+		if (!prevState) {
+			if (!layoutUpdateReason) {
+				return
+			}
+		}
+
 		// If the `VirtualScroller`, while calculating layout parameters, encounters
 		// a not-shown item with a non-measured height, it calls `updateState()` just to
 		// render that item first, and then, after the list has been re-rendered, it measures
@@ -74,41 +115,43 @@ export default function() {
 			this.verticalSpacing = undefined
 		}
 
-		const { items: previousItems } = prevState
-		const { items: newItems } = newState
-		// Even if `this.newItemsWillBeRendered` flag is `true`,
-		// `newItems` could still be equal to `previousItems`.
-		// For example, when `updateState()` calls don't update `state` immediately
-		// and a developer first calls `setItems(newItems)` and then calls `setItems(oldItems)`:
-		// in that case, `this.newItemsWillBeRendered` flag will be `true` but the actual `items`
-		// in state wouldn't have changed due to the first `updateState()` call being overwritten
-		// by the second `updateState()` call (that's called "batching state updates" in React).
-		if (newItems !== previousItems) {
-			const itemsDiff = this.getItemsDiff(previousItems, newItems)
-			if (itemsDiff) {
-				// The call to `.onPrepend()` must precede the call to `.measureItemHeights()`
-				// which is called in `.onRender()`.
-				// `this.itemHeights.onPrepend()` updates `firstMeasuredItemIndex`
-				// and `lastMeasuredItemIndex` of `this.itemHeights`.
-				const { prependedItemsCount } = itemsDiff
-				this.itemHeights.onPrepend(prependedItemsCount)
-			} else {
-				this.itemHeights.reset()
-			}
+		if (prevState) {
+			const { items: previousItems } = prevState
+			const { items: newItems } = newState
+			// Even if `this.newItemsWillBeRendered` flag is `true`,
+			// `newItems` could still be equal to `previousItems`.
+			// For example, when `updateState()` calls don't update `state` immediately
+			// and a developer first calls `setItems(newItems)` and then calls `setItems(oldItems)`:
+			// in that case, `this.newItemsWillBeRendered` flag will be `true` but the actual `items`
+			// in state wouldn't have changed due to the first `updateState()` call being overwritten
+			// by the second `updateState()` call (that's called "batching state updates" in React).
+			if (newItems !== previousItems) {
+				const itemsDiff = this.getItemsDiff(previousItems, newItems)
+				if (itemsDiff) {
+					// The call to `.onPrepend()` must precede the call to `.measureItemHeights()`
+					// which is called in `.onRender()`.
+					// `this.itemHeights.onPrepend()` updates `firstMeasuredItemIndex`
+					// and `lastMeasuredItemIndex` of `this.itemHeights`.
+					const { prependedItemsCount } = itemsDiff
+					this.itemHeights.onPrepend(prependedItemsCount)
+				} else {
+					this.itemHeights.reset()
+				}
 
-			if (!widthHasChanged) {
-				// The call to `this.onNewItemsRendered()` must precede the call to
-				// `.measureItemHeights()` which is called in `.onRender()` because
-				// `this.onNewItemsRendered()` updates `firstMeasuredItemIndex` and
-				// `lastMeasuredItemIndex` of `this.itemHeights` in case of a prepend.
-				//
-				// If after prepending items the scroll position
-				// should be "restored" so that there's no "jump" of content
-				// then it means that all previous items have just been rendered
-				// in a single pass, and there's no need to update layout again.
-				//
-				if (onNewItemsRendered.call(this, itemsDiff, newState) !== 'SEAMLESS_PREPEND') {
-					layoutUpdateReason = LAYOUT_REASON.ITEMS_CHANGED
+				if (!widthHasChanged) {
+					// The call to `this.onNewItemsRendered()` must precede the call to
+					// `.measureItemHeights()` which is called in `.onRender()` because
+					// `this.onNewItemsRendered()` updates `firstMeasuredItemIndex` and
+					// `lastMeasuredItemIndex` of `this.itemHeights` in case of a prepend.
+					//
+					// If after prepending items the scroll position
+					// should be "restored" so that there's no "jump" of content
+					// then it means that all previous items have just been rendered
+					// in a single pass, and there's no need to update layout again.
+					//
+					if (onNewItemsRendered.call(this, itemsDiff, newState) !== 'SEAMLESS_PREPEND') {
+						layoutUpdateReason = LAYOUT_REASON.ITEMS_CHANGED
+					}
 				}
 			}
 		}
@@ -124,9 +167,11 @@ export default function() {
 		// item height measurements is required.
 		//
 		if (
-			newState.firstShownItemIndex !== prevState.firstShownItemIndex ||
-			newState.lastShownItemIndex !== prevState.lastShownItemIndex ||
-			newState.items !== prevState.items ||
+			(prevState && (
+				newState.firstShownItemIndex !== prevState.firstShownItemIndex ||
+				newState.lastShownItemIndex !== prevState.lastShownItemIndex ||
+				newState.items !== prevState.items
+			)) ||
 			widthHasChanged
 		) {
 			const verticalSpacingStateUpdate = this.measureItemHeightsAndSpacing()
@@ -202,14 +247,14 @@ export default function() {
 			// See if any items' heights changed while new items were being rendered.
 			if (this.itemHeightsThatChangedWhileNewItemsWereBeingRendered) {
 				for (const i of Object.keys(this.itemHeightsThatChangedWhileNewItemsWereBeingRendered)) {
-					itemHeights[prependedItemsCount + parseInt(i)] = this.itemHeightsThatChangedWhileNewItemsWereBeingRendered[i]
+					itemHeights[prependedItemsCount + Number(i)] = this.itemHeightsThatChangedWhileNewItemsWereBeingRendered[i]
 				}
 			}
 
 			// See if any items' states changed while new items were being rendered.
 			if (this.itemStatesThatChangedWhileNewItemsWereBeingRendered) {
 				for (const i of Object.keys(this.itemStatesThatChangedWhileNewItemsWereBeingRendered)) {
-					itemStates[prependedItemsCount + parseInt(i)] = this.itemStatesThatChangedWhileNewItemsWereBeingRendered[i]
+					itemStates[prependedItemsCount + Number(i)] = this.itemStatesThatChangedWhileNewItemsWereBeingRendered[i]
 				}
 			}
 
@@ -325,6 +370,9 @@ export default function() {
 
 		// Read `this.firstNonMeasuredItemIndex` flag.
 		const nonMeasuredItemsHaveBeenRendered = this.firstNonMeasuredItemIndex !== undefined
+		if (nonMeasuredItemsHaveBeenRendered) {
+			log('Non-measured item index', this.firstNonMeasuredItemIndex)
+		}
 		// Reset `this.firstNonMeasuredItemIndex` flag.
 		this.firstNonMeasuredItemIndex = undefined
 
@@ -337,8 +385,13 @@ export default function() {
 		// Reset `this.itemStatesThatChangedWhileNewItemsWereBeingRendered`.
 		this.itemStatesThatChangedWhileNewItemsWereBeingRendered = undefined
 
+		// Reset `this.updateLayoutAfterRenderBecauseItemHeightChanged`.
+		const itemHeightHasChanged = this.updateLayoutAfterRenderBecauseItemHeightChanged
+		this.updateLayoutAfterRenderBecauseItemHeightChanged = undefined
+
 		return {
 			nonMeasuredItemsHaveBeenRendered,
+			itemHeightHasChanged,
 			widthHasChanged
 		}
 	}