virtual-scroller 1.11.0 → 1.11.2

package/modules/react/useState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useState.js","names":["useState","useRef","useLayoutEffect","_useState","initialState","onRender","items","_stateUpdate","_setStateUpdate","state","targetState","current","getState","updateState","stateUpdate","newState"],"sources":["../../source/react/useState.js"],"sourcesContent":["import { useState, useRef, useLayoutEffect } from 'react'\r\n\r\n// Creates state management functions.\r\nexport default function _useState({ initialState, onRender, items }) {\r\n\t// `VirtualScroller` state.\r\n\t//\r\n\t// The `_stateUpdate` variable shouldn't be used directly\r\n\t// because in some cases its value may not represent\r\n\t// the actual `state` of the `VirtualScroller`.\r\n\t//\r\n\t// * It will contain an incorrect initial value if `initialState` property is passed\r\n\t//   because it doesn't get initialized to `initialState`.\r\n\t//\r\n\t// * If `items` property gets changed, `state` reference variable gets updated immediately\r\n\t//   but the `_stateUpdate` variable here doesn't (until the component re-renders some other time).\r\n\t//\r\n\t// Instead, use the `state` reference below.\r\n\t//\r\n\tconst [_stateUpdate, _setStateUpdate] = useState()\r\n\r\n\t// This `state` reference is used for accessing the externally stored\r\n\t// virtual scroller state from inside a `VirtualScroller` instance.\r\n\t//\r\n\t// It's also the \"source of truth\" on the actual `VirtualScroller` state.\r\n\t//\r\n\tconst state = useRef(initialState)\r\n\r\n\t// Accumulates state updates until they have been applied.\r\n\tconst targetState = useRef(initialState)\r\n\r\n\t// Update the current state reference.\r\n\t//\r\n\t// Ignores the cases when `state` reference has already been updated\r\n\t// \"immediately\" bypassing a `_setStateUpdate()` call, because\r\n\t// in that case, `_stateUpdate` holds a stale value.\r\n\t//\r\n\tif (state.current !== targetState.current) {\r\n\t\tstate.current = _stateUpdate\r\n\t}\r\n\r\n\t// Call `onRender()` right after every state update.\r\n\t//\r\n\t// When `items` property changes, `useHandleItemsChange()` hook doesn't call\r\n\t// `_setStateUpdate()` because there's no need for a re-render.\r\n\t// But chaning `items` still does trigger a `VirtualScroller` state update,\r\n\t// so added `items` property in the list of this \"effect\"'s dependencies.\r\n\t//\r\n\tuseLayoutEffect(() => {\r\n\t\tonRender()\r\n\t}, [\r\n\t\t_stateUpdate,\r\n\t\titems\r\n\t])\r\n\r\n\treturn {\r\n\t\tgetState: () => state.current,\r\n\r\n\t\t// Updates existing state.\r\n\t\t//\r\n\t\t// State updates are incremental meaning that this code should mimick\r\n\t\t// the classic `React.Component`'s `this.setState()` behavior\r\n\t\t// when calling `this.setState()` doesn't replace `state` but rather merges\r\n\t\t// a set of the updated state properties with the rest of the old ones.\r\n\t\t//\r\n\t\t// The reason is that `useState()` updates are \"asynchronous\" (not immediate),\r\n\t\t// and simply merging over `...state` would merge over potentially stale\r\n\t\t// property values in cases when more than a single `updateState()` call is made\r\n\t\t// before the state actually updates, resulting in losing some of the state updates.\r\n\t\t//\r\n\t\t// For example, the first `updateState()` call updates shown item indexes,\r\n\t\t// and the second `updateState()` call updates `verticalSpacing`.\r\n\t\t// If it was simply `updateState({ ...state, ...stateUpdate })`\r\n\t\t// then the second state update could overwrite the first state update,\r\n\t\t// resulting in incorrect items being shown/hidden.\r\n\t\t//\r\n\t\t// Using `...state.current` instead of `...pendingState.current` here\r\n\t\t// would produce \"stale\" results.\r\n\t\t//\r\n\t\tupdateState: (stateUpdate) => {\r\n\t\t\tconst newState = {\r\n\t\t\t\t...targetState.current,\r\n\t\t\t\t...stateUpdate\r\n\t\t\t}\r\n\t\t\ttargetState.current = newState\r\n\t\t\t// If `items` property did change the component detects it at render time\r\n\t\t\t// and updates `VirtualScroller` items immediately by calling `.setItems()`.\r\n\t\t\t// But, since all of that happens at render time and not in an \"effect\",\r\n\t\t\t// if the state update was done as usual by calling `_setStateUpdate()`,\r\n\t\t\t// React would throw an error about updating state during render.\r\n\t\t\t// Hence, state update in that particular case should happen \"directly\",\r\n\t\t\t// without waiting for an \"asynchronous\" effect to trigger and call\r\n\t\t\t// an \"asyncronous\" `_setStateUpdate()` function.\r\n\t\t\t//\r\n\t\t\t// Updating state directly in that particular case works because there\r\n\t\t\t// already is a render ongoing, so there's no need to re-render the component\r\n\t\t\t// again after such render-time state update.\r\n\t\t\t//\r\n\t\t\t// When the initial `VirtualScroller` state is being set, it contains an `.items`\r\n\t\t\t// property too, but that initial setting is done using another function called\r\n\t\t\t// `setInitialState()`, so using `if (stateUpdate.items)` condition here for describing\r\n\t\t\t// just the case when `state` has been updated as a result of a `setItems()` call\r\n\t\t\t// seems to be fine.\r\n\t\t\t//\r\n\t\t\tif (stateUpdate.items) {\r\n\t\t\t\t// If a `stateUpdate` contains `items` then it means that there was a `setItems()` call.\r\n\t\t\t\t// No need to trigger a re-render — the component got re-rendered anyway.\r\n\t\t\t\t// Just update the `state` \"in place\".\r\n\t\t\t\tstate.current = newState\r\n\t\t\t} else {\r\n\t\t\t\t_setStateUpdate(newState)\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,SAASA,QAAT,EAAmBC,MAAnB,EAA2BC,eAA3B,QAAkD,OAAlD,C,CAEA;;AACA,eAAe,SAASC,SAAT,OAAsD;EAAA,IAAjCC,YAAiC,QAAjCA,YAAiC;EAAA,IAAnBC,QAAmB,QAAnBA,QAAmB;EAAA,IAATC,KAAS,QAATA,KAAS;;EACpE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,iBAAwCN,QAAQ,EAAhD;EAAA;EAAA,IAAOO,YAAP;EAAA,IAAqBC,eAArB,iBAfoE,CAiBpE;EACA;EACA;EACA;EACA;;;EACA,IAAMC,KAAK,GAAGR,MAAM,CAACG,YAAD,CAApB,CAtBoE,CAwBpE;;EACA,IAAMM,WAAW,GAAGT,MAAM,CAACG,YAAD,CAA1B,CAzBoE,CA2BpE;EACA;EACA;EACA;EACA;EACA;;EACA,IAAIK,KAAK,CAACE,OAAN,KAAkBD,WAAW,CAACC,OAAlC,EAA2C;IAC1CF,KAAK,CAACE,OAAN,GAAgBJ,YAAhB;EACA,CAnCmE,CAqCpE;EACA;EACA;EACA;EACA;EACA;EACA;;;EACAL,eAAe,CAAC,YAAM;IACrBG,QAAQ;EACR,CAFc,EAEZ,CACFE,YADE,EAEFD,KAFE,CAFY,CAAf;EAOA,OAAO;IACNM,QAAQ,EAAE;MAAA,OAAMH,KAAK,CAACE,OAAZ;IAAA,CADJ;IAGN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACAE,WAAW,EAAE,qBAACC,WAAD,EAAiB;MAC7B,IAAMC,QAAQ,mCACVL,WAAW,CAACC,OADF,GAEVG,WAFU,CAAd;;MAIAJ,WAAW,CAACC,OAAZ,GAAsBI,QAAtB,CAL6B,CAM7B;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;;MACA,IAAID,WAAW,CAACR,KAAhB,EAAuB;QACtB;QACA;QACA;QACAG,KAAK,CAACE,OAAN,GAAgBI,QAAhB;MACA,CALD,MAKO;QACNP,eAAe,CAACO,QAAD,CAAf;MACA;IACD;EAzDK,CAAP;AA2DA"}
+{"version":3,"file":"useState.js","names":["useState","useRef","useCallback","useLayoutEffect","_useState","initialState","onRender","itemsProperty","USE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION","_newState","_setNewState","state","setState","newState","current","nextState","undefined","getState","getNextState","updateState","stateUpdate","items"],"sources":["../../source/react/useState.js"],"sourcesContent":["import { useState, useRef, useCallback, useLayoutEffect } from 'react'\r\n\r\n// Creates state management functions.\r\nexport default function _useState({\r\n\tinitialState,\r\n\tonRender,\r\n\titemsProperty,\r\n\tUSE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION\r\n}) {\r\n\t// This is a utility state variable that is used to re-render the component.\r\n\t// It should not be used to access the current `VirtualScroller` state.\r\n\t// It's more of a \"requested\" `VirtualScroller` state.\r\n\t//\r\n\t// It will also be stale in cases when `USE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION`\r\n\t// feature is used for setting new `items` in state.\r\n\t//\r\n\tconst [_newState, _setNewState] = useState(initialState)\r\n\r\n\t// This `state` reference is what `VirtualScroller` uses internally.\r\n\t// It's the \"source of truth\" on the actual `VirtualScroller` state.\r\n\tconst state = useRef(initialState)\r\n\r\n\tconst setState = useCallback((newState) => {\r\n\t\tstate.current = newState\r\n\t}, [])\r\n\r\n\t// Accumulates all \"pending\" state updates until they have been applied.\r\n\tconst nextState = useRef(initialState)\r\n\r\n\t// Updates the actual `VirtualScroller` state right after a requested state update\r\n\t// has been applied. Doesn't do anything at initial render.\r\n\tuseLayoutEffect(() => {\r\n\t\tsetState(_newState)\r\n\t}, [\r\n\t\t_newState\r\n\t])\r\n\r\n\t// Calls `onRender()` right after every state update (which is a re-render),\r\n\t// and also right after the initial render.\r\n\tuseLayoutEffect(() => {\r\n\t\tonRender()\r\n\t}, [\r\n\t\t_newState,\r\n\t\t// When using `USE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION` feature,\r\n\t\t// there won't be a `_setNewState()` function call when `items` property changes,\r\n\t\t// hence the additional `itemsProperty` dependency.\r\n\t\tUSE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION ? itemsProperty : undefined\r\n\t])\r\n\r\n\treturn {\r\n\t\tgetState: () => state.current,\r\n\r\n\t\tgetNextState: () => nextState.current,\r\n\r\n\t\t// Requests a state update.\r\n\t\t//\r\n\t\t// State updates are incremental meaning that this function mimicks\r\n\t\t// the classic `React.Component`'s `this.setState()` behavior\r\n\t\t// when calling `this.setState()` didn't replace `state` but rather merged\r\n\t\t// the updated state properties over the \"old\" state properties.\r\n\t\t//\r\n\t\t// The reason for using pending state updates accumulation is that\r\n\t\t// `useState()` updates are \"asynchronous\" (not immediate),\r\n\t\t// and simply merging over `...state` would merge over potentially stale\r\n\t\t// property values in cases when more than a single `updateState()` call is made\r\n\t\t// before the state actually updates, resulting in losing some of those state updates.\r\n\t\t//\r\n\t\t// Example: the first `updateState()` call updates shown item indexes,\r\n\t\t// and the second `updateState()` call updates `verticalSpacing`.\r\n\t\t// If it was simply `updateState({ ...state, ...stateUpdate })`\r\n\t\t// then the second state update could overwrite the first state update,\r\n\t\t// resulting in incorrect items being shown/hidden.\r\n\t\t//\r\n\t\tupdateState: (stateUpdate) => {\r\n\t\t\tnextState.current = {\r\n\t\t\t\t...nextState.current,\r\n\t\t\t\t...stateUpdate\r\n\t\t\t}\r\n\t\t\t// If `items` property did change, the component detects it at render time\r\n\t\t\t// and updates `VirtualScroller` items immediately by calling `.setItems()`,\r\n\t\t\t// which, in turn, immediately calls this `updateState()` function\r\n\t\t\t// with a `stateUpdate` argument that contains the new `items`,\r\n\t\t\t// so checking for `stateUpdate.items` could detect situations like that.\r\n\t\t\t//\r\n\t\t\t// When the initial `VirtualScroller` state is being set, it contains the `.items`\r\n\t\t\t// property too, but that initial setting is done using another function called\r\n\t\t\t// `setInitialState()`, so using `if (stateUpdate.items)` condition here for describing\r\n\t\t\t// just the case when `state` has been updated as a result of a `setItems()` call\r\n\t\t\t// seems to be fine.\r\n\t\t\t//\r\n\t\t\tconst _newState = nextState.current\r\n\t\t\tif (stateUpdate.items && USE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION) {\r\n\t\t\t\tsetState(_newState)\r\n\t\t\t} else {\r\n\t\t\t\t_setNewState(_newState)\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,SAASA,QAAT,EAAmBC,MAAnB,EAA2BC,WAA3B,EAAwCC,eAAxC,QAA+D,OAA/D,C,CAEA;;AACA,eAAe,SAASC,SAAT,OAKZ;EAAA,IAJFC,YAIE,QAJFA,YAIE;EAAA,IAHFC,QAGE,QAHFA,QAGE;EAAA,IAFFC,aAEE,QAFFA,aAEE;EAAA,IADFC,8CACE,QADFA,8CACE;;EACF;EACA;EACA;EACA;EACA;EACA;EACA;EACA,iBAAkCR,QAAQ,CAACK,YAAD,CAA1C;EAAA;EAAA,IAAOI,SAAP;EAAA,IAAkBC,YAAlB,iBARE,CAUF;EACA;;;EACA,IAAMC,KAAK,GAAGV,MAAM,CAACI,YAAD,CAApB;EAEA,IAAMO,QAAQ,GAAGV,WAAW,CAAC,UAACW,QAAD,EAAc;IAC1CF,KAAK,CAACG,OAAN,GAAgBD,QAAhB;EACA,CAF2B,EAEzB,EAFyB,CAA5B,CAdE,CAkBF;;EACA,IAAME,SAAS,GAAGd,MAAM,CAACI,YAAD,CAAxB,CAnBE,CAqBF;EACA;;EACAF,eAAe,CAAC,YAAM;IACrBS,QAAQ,CAACH,SAAD,CAAR;EACA,CAFc,EAEZ,CACFA,SADE,CAFY,CAAf,CAvBE,CA6BF;EACA;;EACAN,eAAe,CAAC,YAAM;IACrBG,QAAQ;EACR,CAFc,EAEZ,CACFG,SADE,EAEF;EACA;EACA;EACAD,8CAA8C,GAAGD,aAAH,GAAmBS,SAL/D,CAFY,CAAf;EAUA,OAAO;IACNC,QAAQ,EAAE;MAAA,OAAMN,KAAK,CAACG,OAAZ;IAAA,CADJ;IAGNI,YAAY,EAAE;MAAA,OAAMH,SAAS,CAACD,OAAhB;IAAA,CAHR;IAKN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACAK,WAAW,EAAE,qBAACC,WAAD,EAAiB;MAC7BL,SAAS,CAACD,OAAV,mCACIC,SAAS,CAACD,OADd,GAEIM,WAFJ,EAD6B,CAK7B;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;;MACA,IAAMX,SAAS,GAAGM,SAAS,CAACD,OAA5B;;MACA,IAAIM,WAAW,CAACC,KAAZ,IAAqBb,8CAAzB,EAAyE;QACxEI,QAAQ,CAACH,SAAD,CAAR;MACA,CAFD,MAEO;QACNC,YAAY,CAACD,SAAD,CAAZ;MACA;IACD;EA/CK,CAAP;AAiDA"}

package/modules/react/useStyle.js

@@ -1,15 +1,15 @@
 import px from '../utility/px.js';
 export default function useStyle(_ref) {
   var tbody = _ref.tbody,
-      virtualScroller = _ref.virtualScroller;
+      getNextState = _ref.getNextState;
 
   if (tbody) {
     return;
   }
 
-  var _virtualScroller$getS = virtualScroller.getState(),
-      beforeItemsHeight = _virtualScroller$getS.beforeItemsHeight,
-      afterItemsHeight = _virtualScroller$getS.afterItemsHeight;
+  var _getNextState = getNextState(),
+      beforeItemsHeight = _getNextState.beforeItemsHeight,
+      afterItemsHeight = _getNextState.afterItemsHeight;
 
   return {
     paddingTop: px(beforeItemsHeight),

package/modules/react/useStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStyle.js","names":["px","useStyle","tbody","virtualScroller","getState","beforeItemsHeight","afterItemsHeight","paddingTop","paddingBottom"],"sources":["../../source/react/useStyle.js"],"sourcesContent":["import px from '../utility/px.js'\r\n\r\nexport default function useStyle({\r\n\ttbody,\r\n\tvirtualScroller\r\n}) {\r\n\tif (tbody) {\r\n\t\treturn\r\n\t}\r\n\r\n\tconst {\r\n\t\tbeforeItemsHeight,\r\n\t\tafterItemsHeight\r\n\t} = virtualScroller.getState()\r\n\r\n\treturn {\r\n\t\tpaddingTop: px(beforeItemsHeight),\r\n\t\tpaddingBottom: px(afterItemsHeight)\r\n\t}\r\n}"],"mappings":"AAAA,OAAOA,EAAP,MAAe,kBAAf;AAEA,eAAe,SAASC,QAAT,OAGZ;EAAA,IAFFC,KAEE,QAFFA,KAEE;EAAA,IADFC,eACE,QADFA,eACE;;EACF,IAAID,KAAJ,EAAW;IACV;EACA;;EAED,4BAGIC,eAAe,CAACC,QAAhB,EAHJ;EAAA,IACCC,iBADD,yBACCA,iBADD;EAAA,IAECC,gBAFD,yBAECA,gBAFD;;EAKA,OAAO;IACNC,UAAU,EAAEP,EAAE,CAACK,iBAAD,CADR;IAENG,aAAa,EAAER,EAAE,CAACM,gBAAD;EAFX,CAAP;AAIA"}
+{"version":3,"file":"useStyle.js","names":["px","useStyle","tbody","getNextState","beforeItemsHeight","afterItemsHeight","paddingTop","paddingBottom"],"sources":["../../source/react/useStyle.js"],"sourcesContent":["import px from '../utility/px.js'\r\n\r\nexport default function useStyle({\r\n\ttbody,\r\n\tgetNextState\r\n}) {\r\n\tif (tbody) {\r\n\t\treturn\r\n\t}\r\n\r\n\tconst {\r\n\t\tbeforeItemsHeight,\r\n\t\tafterItemsHeight\r\n\t} = getNextState()\r\n\r\n\treturn {\r\n\t\tpaddingTop: px(beforeItemsHeight),\r\n\t\tpaddingBottom: px(afterItemsHeight)\r\n\t}\r\n}"],"mappings":"AAAA,OAAOA,EAAP,MAAe,kBAAf;AAEA,eAAe,SAASC,QAAT,OAGZ;EAAA,IAFFC,KAEE,QAFFA,KAEE;EAAA,IADFC,YACE,QADFA,YACE;;EACF,IAAID,KAAJ,EAAW;IACV;EACA;;EAED,oBAGIC,YAAY,EAHhB;EAAA,IACCC,iBADD,iBACCA,iBADD;EAAA,IAECC,gBAFD,iBAECA,gBAFD;;EAKA,OAAO;IACNC,UAAU,EAAEN,EAAE,CAACI,iBAAD,CADR;IAENG,aAAa,EAAEP,EAAE,CAACK,gBAAD;EAFX,CAAP;AAIA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-scroller",
-  "version": "1.11.0",
+  "version": "1.11.2",
   "description": "A component for efficiently rendering large lists of variable height items",
   "main": "index.cjs",
   "module": "index.js",

package/source/DOM/ItemsContainer.js

@@ -7,13 +7,23 @@ export default class ItemsContainer {
 		this.getElement = getElement
 	}
 
+	_getNthRenderedItemElement(renderedElementIndex) {
+		const childNodes = this.getElement().childNodes
+		if (renderedElementIndex > childNodes.length - 1) {
+			console.log('~ Items Container Contents ~')
+			console.log(this.getElement().innerHTML)
+			throw new Error(`Element with index ${renderedElementIndex} was not found in the list of Rendered Item Elements in the Items Container of Virtual Scroller. There're only ${childNodes.length} Elements there.`)
+		}
+		return childNodes[renderedElementIndex]
+	}
+
 	/**
 	 * Returns an item element's "top offset", relative to the items `container`'s top edge.
 	 * @param  {number} renderedElementIndex — An index of an item relative to the "first shown item index". For example, if the list is showing items from index 8 to index 12 then `renderedElementIndex = 0` would mean the item at index `8`.
 	 * @return {number}
 	 */
 	getNthRenderedItemTopOffset(renderedElementIndex) {
-		return this.getElement().childNodes[renderedElementIndex].getBoundingClientRect().top - this.getElement().getBoundingClientRect().top
+		return this._getNthRenderedItemElement(renderedElementIndex).getBoundingClientRect().top - this.getElement().getBoundingClientRect().top
 	}
 
 	/**
@@ -23,8 +33,8 @@ export default class ItemsContainer {
 	 */
 	getNthRenderedItemHeight(renderedElementIndex) {
 		// `offsetHeight` is not precise enough (doesn't return fractional pixels).
-		// return this.getElement().childNodes[renderedElementIndex].offsetHeight
-		return this.getElement().childNodes[renderedElementIndex].getBoundingClientRect().height
+		// return this._getNthRenderedItemElement(renderedElementIndex).offsetHeight
+		return this._getNthRenderedItemElement(renderedElementIndex).getBoundingClientRect().height
 	}
 
 	/**

package/source/ItemHeights.js

@@ -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 some other 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 `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.')
 					// Update the item's height as an attempt to fix things.
 					this._set(i, height)
 				}

package/source/VirtualScroller.layout.js

@@ -372,7 +372,7 @@ export default function() {
 
 	this._onItemHeightChange = (i) => {
 		log('~ Re-measure item height ~')
-		log('Item', i)
+		log('Item index', i)
 
 		const {
 			itemHeights,
@@ -407,7 +407,7 @@ export default function() {
 			// 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 there\'re several `onItemHeightChange(i)` calls issued at the same time.')
+			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.')
 		}
 
 		const previousHeight = itemHeights[i]

package/source/VirtualScroller.state.js

@@ -40,7 +40,7 @@ export default function createStateHelpers({
 	this._setItemState = (i, newItemState) => {
 		if (isDebug()) {
 			log('~ Item state changed ~')
-			log('Item', i)
+			log('Item index', i)
 			// Uses `JSON.stringify()` here instead of just outputting the JSON objects as is
 			// because outputting JSON objects as is would show different results later when
 			// the developer inspects those in the web browser console if those state objects

package/source/react/VirtualScroller.js

@@ -8,13 +8,36 @@ import useInstanceMethods from './useInstanceMethods.js'
 import useItemKeys from './useItemKeys.js'
 import useSetItemState from './useSetItemState.js'
 import useOnItemHeightChange from './useOnItemHeightChange.js'
-import useHandleItemsChange from './useHandleItemsChange.js'
+import useHandleItemsPropertyChange from './useHandleItemsPropertyChange.js'
+import useHandleItemIndexesChange from './useHandleItemIndexesChange.js'
 import useClassName from './useClassName.js'
 import useStyle from './useStyle.js'
 
+// When `items` property changes, `useHandleItemsPropertyChange()` hook detects that
+// and calls `VirtualScroller.setItems()` which in turn calls the `updateState()` function.
+// At this point, an insignificant optimization could be applied:
+// the component could avoid re-rendering the second time.
+// Instead, the state update could be applied "immediately" if it originated
+// from `.setItems()` function call, eliminating the unneeded second re-render.
+//
+// I could see how this minor optimization could get brittle when modifiying the code,
+// so I put it under a feature flag so that it could potentially be turned off
+// in case of any potential weird issues in some future.
+//
+// Another reason for using this feature is:
+//
+// Since `useHandleItemsPropertyChange()` runs at render time
+// and not after the render has finished (not in an "effect"),
+// if the state update was done "conventionally" (by calling `_setNewState()`),
+// React would throw an error about updating state during render.
+// No one knows what the original error message was.
+// Perhaps it's no longer relevant in newer versions of React.
+//
+const USE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION = true
+
 function VirtualScroller({
 	as: AsComponent,
-	items,
+	items: itemsProperty,
 	itemComponent: Component,
 	itemComponentProps,
 	// `estimatedItemHeight` property name is deprecated,
@@ -52,7 +75,7 @@ function VirtualScroller({
 
 	// Create a `VirtualScroller` instance.
 	const virtualScroller = useVirtualScroller({
-		items,
+		items: itemsProperty,
 		// `estimatedItemHeight` property name is deprecated,
 		// use `getEstimatedItemHeight` property instead.
 		estimatedItemHeight,
@@ -90,11 +113,13 @@ function VirtualScroller({
 	// This way, React will re-render the component on every state update.
 	const {
 		getState,
-		updateState
+		updateState,
+		getNextState
 	} = useState({
 		initialState: _initialState,
 		onRender: virtualScroller.onRender,
-		items
+		itemsProperty,
+		USE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION
 	})
 
 	// Use custom (external) state storage in the `VirtualScroller`.
@@ -121,24 +146,31 @@ function VirtualScroller({
 	// Cache per-item `setItemState` functions' "references"
 	// so that item components don't get re-rendered needlessly.
 	const getSetItemState = useSetItemState({
-		items,
+		initialItemsCount: itemsProperty.length,
 		virtualScroller
 	})
 
 	// Cache per-item `onItemHeightChange` functions' "references"
 	// so that item components don't get re-rendered needlessly.
 	const getOnItemHeightChange = useOnItemHeightChange({
-		items,
+		initialItemsCount: itemsProperty.length,
 		virtualScroller
 	})
 
-	// Detect if `items` have changed.
-	useHandleItemsChange(items, {
+	// Calls `.setItems()` if `items` property has changed.
+	useHandleItemsPropertyChange(itemsProperty, {
 		virtualScroller,
 		// `preserveScrollPosition` property name is deprecated,
 		// use `preserveScrollPositionOnPrependItems` property instead.
 		preserveScrollPosition,
 		preserveScrollPositionOnPrependItems,
+		nextItems: getNextState().items
+	})
+
+	// Updates `key`s if item indexes have changed.
+	useHandleItemIndexesChange({
+		virtualScroller,
+		itemsBeingRendered: getNextState().items,
 		updateItemKeysForNewItems
 	})
 
@@ -177,15 +209,15 @@ function VirtualScroller({
 
 	const style = useStyle({
 		tbody,
-		virtualScroller
+		getNextState
 	})
 
 	const {
-		items: renderedItems,
+		items: currentItems,
 		itemStates,
 		firstShownItemIndex,
 		lastShownItemIndex
-	} = virtualScroller.getState()
+	} = getNextState()
 
 	return (
 		<AsComponent
@@ -193,7 +225,7 @@ function VirtualScroller({
 			ref={container}
 			className={className}
 			style={style}>
-			{renderedItems.map((item, i) => {
+			{currentItems.map((item, i) => {
 				if (i >= firstShownItemIndex && i <= lastShownItemIndex) {
 					// * Passing `item` as `children` property is legacy and is deprecated.
 					//   If version `2.x` is published in some hypothetical future,

package/source/react/useHandleItemIndexesChange.js

@@ -0,0 +1,49 @@
+import { useRef } from 'react'
+
+// If the order of the `items` changes, or new `items` get prepended resulting in a "shift":
+//
+// * Re-generate the React `key` prefix for item elements
+//   so that all item components are re-rendered for the new `items` list.
+//   That's because item components may have their own internal state,
+//   and simply passing another `item` property for an item component
+//   might result in bugs, which React would do with its "re-using" policy
+//   if the unique `key` workaround hasn't been used.
+//
+export default function useHandleItemIndexesChange({
+	virtualScroller,
+	itemsBeingRendered,
+	updateItemKeysForNewItems
+}) {
+	const previousItemsBeingRenderedRef = useRef(itemsBeingRendered)
+	const previousItemsBeingRendered = previousItemsBeingRenderedRef.current
+	const haveItemsChanged = itemsBeingRendered !== previousItemsBeingRendered
+	previousItemsBeingRenderedRef.current = itemsBeingRendered
+
+	if (haveItemsChanged) {
+		let shouldUpdateItemKeys = true
+
+		const itemsDiff = virtualScroller.getItemsDiff(previousItemsBeingRendered, itemsBeingRendered)
+		// `itemsDiff` will be `undefined` in case of a non-incremental items list change.
+		if (itemsDiff) {
+			const {
+				prependedItemsCount,
+				appendedItemsCount
+			} = itemsDiff
+			if (prependedItemsCount === 0 && appendedItemsCount === 0) {
+				// The items order hasn't changed.
+				// No need to re-generate the `key` prefix.
+				shouldUpdateItemKeys = false
+			}
+			else if (prependedItemsCount === 0 && appendedItemsCount > 0) {
+				// The item order hasn't changed.
+				// No need to re-generate the `key` prefix.
+				shouldUpdateItemKeys = false
+			}
+		}
+
+		// Update React element `key`s for the new set of `items`.
+		if (shouldUpdateItemKeys) {
+			updateItemKeysForNewItems()
+		}
+	}
+}

package/source/react/{useHandleItemsChange.js → useHandleItemsPropertyChange.js}

@@ -1,6 +1,6 @@
 import { useRef } from 'react'
 
-// If new `items` are passed:
+// If new `items` property is passed:
 //
 // * Store the scroll Y position for the first one of the current items
 //   so that it could potentially (in some cases) be restored after the
@@ -8,26 +8,14 @@ import { useRef } from 'react'
 //
 // * Call `VirtualScroller.setItems()` function.
 //
-// * Re-generate the React `key` prefix for item elements
-//   so that all item components are re-rendered for the new `items` list.
-//   That's because item components may have their own internal state,
-//   and simply passing another `item` property for an item component
-//   might result in bugs, which React would do with its "re-using" policy
-//   if the unique `key` workaround hasn't been used.
-//
-export default function useHandleItemsChange(items, {
+export default function useHandleItemsPropertyChange(itemsProperty, {
 	virtualScroller,
 	// `preserveScrollPosition` property name is deprecated,
 	// use `preserveScrollPositionOnPrependItems` property instead.
 	preserveScrollPosition,
 	preserveScrollPositionOnPrependItems,
-	updateItemKeysForNewItems
+	nextItems
 }) {
-	const {
-		items: renderedItems,
-		firstShownItemIndex
-	} = virtualScroller.getState()
-
 	// During render, check if the `items` list has changed.
 	// If it has, capture the Y scroll position and updated item element `key`s.
 
@@ -72,13 +60,16 @@ export default function useHandleItemsChange(items, {
 	// scroll Y position is captured while the "Show previous" button
 	// is still being shown.
 
-	const previousItems = useRef(items)
-	const hasItemsPropertyChanged = items !== previousItems.current
-	previousItems.current = items
+	const previousItemsProperty = useRef(itemsProperty)
+	const hasItemsPropertyChanged = itemsProperty !== previousItemsProperty.current
+	previousItemsProperty.current = itemsProperty
+
 	if (hasItemsPropertyChanged) {
-		let itemsHaveChanged = true
-		let shouldUpdateItemKeys = true
-		const itemsDiff = virtualScroller.getItemsDiff(renderedItems, items)
+		let shouldUpdateItems = true
+
+		// Analyze the upcoming `items` change.
+		const itemsDiff = virtualScroller.getItemsDiff(nextItems, itemsProperty)
+
 		// `itemsDiff` will be `undefined` in case of a non-incremental items list change.
 		if (itemsDiff) {
 			const {
@@ -86,30 +77,21 @@ export default function useHandleItemsChange(items, {
 				appendedItemsCount
 			} = itemsDiff
 			if (prependedItemsCount === 0 && appendedItemsCount === 0) {
-				// The items haven't changed. No need to re-generate
-				// the `key` prefix or to snapshot the Y scroll position.
-				itemsHaveChanged = false
-				shouldUpdateItemKeys = false
-			}
-			else if (prependedItemsCount === 0 && appendedItemsCount > 0) {
-				// Just some items got appended. No need to re-generate
-				// the `key` prefix or to snapshot the Y scroll position.
-				shouldUpdateItemKeys = false
+				// The items order hasn't changed.
+				// No need to update them in `VirtualScroller` or to snapshot the Y scroll position.
+				shouldUpdateItems = false
 			}
 		}
 
-		if (itemsHaveChanged) {
-			// Set the new `items`.
-			virtualScroller.setItems(items, {
+		if (shouldUpdateItems) {
+			// Request to update the `items` in `VirtualScroller`.
+			// This will result in a `setState()` call.
+			// The new items won't be rendered until that state update is applied.
+			virtualScroller.setItems(itemsProperty, {
 				// `preserveScrollPosition` property name is deprecated,
 				// use `preserveScrollPositionOnPrependItems` property instead.
 				preserveScrollPositionOnPrependItems: preserveScrollPositionOnPrependItems || preserveScrollPosition
 			})
-
-			// Update React element `key`s for the new set of `items`.
-			if (shouldUpdateItemKeys) {
-				updateItemKeysForNewItems()
-			}
 		}
 	}
 }

package/source/react/useOnItemHeightChange.js

@@ -1,12 +1,12 @@
 import { useMemo, useRef, useCallback } from 'react'
 
 export default function useOnItemHeightChange({
-	items,
+	initialItemsCount,
 	virtualScroller
 }) {
 	// Only compute the initial cache value once.
 	const initialCacheValue = useMemo(() => {
-		return new Array(items.length)
+		return new Array(initialItemsCount)
 	}, [])
 
 	// Handler functions cache.

package/source/react/useSetItemState.js

@@ -1,12 +1,12 @@
 import { useMemo, useRef, useCallback } from 'react'
 
 export default function useSetItemState({
-	items,
+	initialItemsCount,
 	virtualScroller
 }) {
 	// Only compute the initial cache value once.
 	const initialCacheValue = useMemo(() => {
-		return new Array(items.length)
+		return new Array(initialItemsCount)
 	}, [])
 
 	// Handler functions cache.