virtual-scroller 1.7.6 → 1.8.0

package/commonjs/VirtualScroller.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,17 +11,17 @@ var _requestAnimationFrameTimeout = require("request-animation-frame-timeout");
 
 var _tbody = require("./DOM/tbody");
 
-var _RenderingEngine = _interopRequireDefault(require("./DOM/RenderingEngine"));
-
-var _WaitForStylesToLoad = _interopRequireDefault(require("./DOM/WaitForStylesToLoad"));
+var _Engine = _interopRequireDefault(require("./DOM/Engine"));
 
 var _Layout = _interopRequireWildcard(require("./Layout"));
 
 var _Resize = _interopRequireDefault(require("./Resize"));
 
+var _BeforeResize = _interopRequireDefault(require("./BeforeResize"));
+
 var _Scroll = _interopRequireDefault(require("./Scroll"));
 
-var _RestoreScroll = _interopRequireDefault(require("./RestoreScroll"));
+var _ListHeightChangeWatcher = _interopRequireDefault(require("./ListHeightChangeWatcher"));
 
 var _ItemHeights = _interopRequireDefault(require("./ItemHeights"));
 
@@ -31,11 +33,17 @@ var _debug = _interopRequireWildcard(require("./utility/debug"));
 
 var _shallowEqual = _interopRequireDefault(require("./utility/shallowEqual"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+var _getStateSnapshot = _interopRequireDefault(require("./utility/getStateSnapshot"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -45,30 +53,52 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var VirtualScroller =
-/*#__PURE__*/
-function () {
+var VirtualScroller = /*#__PURE__*/function () {
   /**
-   * @param  {function} getContainerElement — Returns the container DOM `Element`.
+   * @param  {function} getItemsContainerElement — Returns the container DOM `Element`.
    * @param  {any[]} items — The list of items.
    * @param  {Object} [options] — See README.md.
    * @return {VirtualScroller}
    */
-  function VirtualScroller(getContainerElement, items) {
+  function VirtualScroller(getItemsContainerElement, items) {
     var _this = this;
 
     var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
     _classCallCheck(this, VirtualScroller);
 
+    _defineProperty(this, "getActualColumnsCountForState", function () {
+      return _this._getColumnsCount ? _this._getColumnsCount(_this.scrollableContainer) : undefined;
+    });
+
+    _defineProperty(this, "getVerticalSpacing", function () {
+      return _this.verticalSpacing || 0;
+    });
+
     _defineProperty(this, "getListTopOffsetInsideScrollableContainer", function () {
-      var listTopOffset = _this.scrollableContainer.getTopOffset(_this.getContainerElement());
+      var listTopOffset = _this.scrollableContainer.getItemsContainerTopOffset();
 
-      _this.waitForStylesToLoad.onGotListTopOffset(listTopOffset);
+      if (_this.listTopOffsetWatcher) {
+        _this.listTopOffsetWatcher.onListTopOffset(listTopOffset);
+      }
 
       return listTopOffset;
     });
 
+    _defineProperty(this, "stop", function () {
+      _this.isRendered = false;
+
+      _this.resize.stop();
+
+      _this.scroll.stop();
+
+      if (_this.listTopOffsetWatcher) {
+        _this.listTopOffsetWatcher.stop();
+      }
+
+      _this.cancelLayoutTimer({});
+    });
+
     _defineProperty(this, "willUpdateState", function (newState, prevState) {
       // Ignore setting initial state.
       if (!prevState) {
@@ -98,100 +128,165 @@ function () {
       }
 
       (0, _debug["default"])('~ Rendered ~');
-      _this.newItemsPending = undefined;
-      _this.layoutResetPending = undefined;
-      var redoLayoutReason = _this.redoLayoutReason;
-      _this.redoLayoutReason = undefined;
-      var previousItems = prevState.items;
-      var newItems = newState.items;
 
-      if (newItems !== previousItems) {
-        var layoutNeedsReCalculating = true;
+      if ((0, _debug.isDebug)()) {
+        (0, _debug["default"])('State', (0, _getStateSnapshot["default"])(newState));
+      }
 
-        var itemsDiff = _this.getItemsDiff(previousItems, newItems); // If it's an "incremental" update.
+      var layoutUpdateReason;
 
+      if (_this.firstNonMeasuredItemIndex !== undefined) {
+        layoutUpdateReason = _Layout.LAYOUT_REASON.ACTUAL_ITEM_HEIGHTS_HAVE_BEEN_MEASURED;
+      }
 
-        if (itemsDiff) {
-          var prependedItemsCount = itemsDiff.prependedItemsCount,
-              appendedItemsCount = itemsDiff.appendedItemsCount;
+      if (_this.resetLayoutAfterResize) {
+        layoutUpdateReason = _Layout.LAYOUT_REASON.VIEWPORT_WIDTH_CHANGED;
+      } // If `this.resetLayoutAfterResize` flag was reset after calling
+      // `this.measureItemHeightsAndSpacingAndUpdateTablePadding()`
+      // then there would be a bug because
+      // `this.measureItemHeightsAndSpacingAndUpdateTablePadding()`
+      // calls `this.setState({ verticalSpacing })` which calls
+      // `this.didUpdateState()` immediately, so `this.resetLayoutAfterResize`
+      // flag wouldn't be reset by that time and would trigger things
+      // like `this.itemHeights.reset()` a second time.
+      //
+      // So, instead read the value of `this.resetLayoutAfterResize` flag
+      // and reset it right away to prevent any such potential bugs.
+      //
 
-          if (prependedItemsCount > 0) {
-            // The call to `.onPrepend()` must precede
-            // the call to `.measureItemHeights()`
-            // which is called in `.onRendered()`.
-            _this.itemHeights.onPrepend(prependedItemsCount);
 
-            if (_this.restoreScroll.shouldRestoreScrollAfterRender()) {
-              layoutNeedsReCalculating = false;
-              (0, _debug["default"])('~ Restore Scroll Position ~');
+      var resetLayoutAfterResize = _this.resetLayoutAfterResize; // Reset `this.firstNonMeasuredItemIndex`.
 
-              var scrollByY = _this.restoreScroll.getScrollDifference();
+      _this.firstNonMeasuredItemIndex = undefined; // Reset `this.resetLayoutAfterResize` flag.
 
-              if (scrollByY) {
-                (0, _debug["default"])('Scroll down by', scrollByY);
+      _this.resetLayoutAfterResize = undefined; // Reset `this.newItemsWillBeRendered` flag.
 
-                _this.scroll.scrollByY(scrollByY);
-              } else {
-                (0, _debug["default"])('Scroll position hasn\'t changed');
-              }
-            }
-          }
+      _this.newItemsWillBeRendered = undefined; // Reset `this.itemHeightsThatChangedWhileNewItemsWereBeingRendered`.
+
+      _this.itemHeightsThatChangedWhileNewItemsWereBeingRendered = undefined; // Reset `this.itemStatesThatChangedWhileNewItemsWereBeingRendered`.
+
+      _this.itemStatesThatChangedWhileNewItemsWereBeingRendered = undefined;
+
+      if (resetLayoutAfterResize) {
+        // Reset measured item heights on viewport width change.
+        _this.itemHeights.reset(); // Reset `verticalSpacing` (will be re-measured).
+
+
+        _this.verticalSpacing = undefined;
+      }
+
+      var previousItems = prevState.items;
+      var newItems = newState.items; // Even if `this.newItemsWillBeRendered` flag is `true`,
+      // `newItems` could still be equal to `previousItems`.
+      // For example, when `setState()` 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 `setState()` call being overwritten
+      // by the second `setState()` call (that's called "batching state updates" in React).
+
+      if (newItems !== previousItems) {
+        var itemsDiff = _this.getItemsDiff(previousItems, newItems);
+
+        if (itemsDiff) {
+          // The call to `.onPrepend()` must precede the call to `.measureItemHeights()`
+          // which is called in `.onRendered()`.
+          // `this.itemHeights.onPrepend()` updates `firstMeasuredItemIndex`
+          // and `lastMeasuredItemIndex` of `this.itemHeights`.
+          var prependedItemsCount = itemsDiff.prependedItemsCount;
+
+          _this.itemHeights.onPrepend(prependedItemsCount);
         } else {
-          _this.itemHeights.reset();
+          _this.itemHeights.reset(); // `newState.itemHeights` is an array of `undefined`s.
 
-          _this.itemHeights.initialize(_this.getState().itemHeights);
+
+          _this.itemHeights.initialize(newState.itemHeights);
         }
 
-        if (layoutNeedsReCalculating) {
-          redoLayoutReason = _Layout.LAYOUT_REASON.ITEMS_CHANGED;
+        if (!resetLayoutAfterResize) {
+          // The call to `this.onNewItemsRendered()` must precede the call to
+          // `.measureItemHeights()` which is called in `.onRendered()` 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 (_this.onNewItemsRendered(itemsDiff, newState) !== 'SEAMLESS_PREPEND') {
+            layoutUpdateReason = _Layout.LAYOUT_REASON.ITEMS_CHANGED;
+          }
         }
-      } // Call `.onRendered()` if shown items configuration changed.
+      }
 
+      var stateUpdate; // Re-measure item heights.
+      // Also, measure vertical spacing (if not measured) and fix `<table/>` padding.
+      //
+      // This block should go after `if (newItems !== previousItems) {}`
+      // because `this.itemHeights` can get `.reset()` there, which would
+      // discard all the measurements done here, and having currently shown
+      // item height measurements is required.
+      //
 
-      if (newState.firstShownItemIndex !== prevState.firstShownItemIndex || newState.lastShownItemIndex !== prevState.lastShownItemIndex || newState.items !== prevState.items) {
-        _this.onRenderedNewLayout();
-      }
+      if (newState.firstShownItemIndex !== prevState.firstShownItemIndex || newState.lastShownItemIndex !== prevState.lastShownItemIndex || newState.items !== prevState.items || resetLayoutAfterResize) {
+        var verticalSpacingStateUpdate = _this.measureItemHeightsAndSpacingAndUpdateTablePadding();
 
-      if (redoLayoutReason) {
-        return _this.redoLayoutRightAfterRender({
-          reason: redoLayoutReason
-        });
-      }
-    });
+        if (verticalSpacingStateUpdate) {
+          stateUpdate = _objectSpread(_objectSpread({}, stateUpdate), verticalSpacingStateUpdate);
+        }
+      } // Clean up "before resize" item heights and adjust the scroll position accordingly.
+      // Calling `this.beforeResize.cleanUpBeforeResizeItemHeights()` might trigger
+      // a `this.setState()` call but that wouldn't matter because `beforeResize`
+      // properties have already been modified directly in `state` (a hacky technique)
 
-    _defineProperty(this, "updateShownItemIndexes", function () {
-      (0, _debug["default"])('~ Layout results ' + (_this.bypass ? '(bypass) ' : '') + '~');
 
-      var visibleAreaIncludingMargins = _this.getVisibleAreaBoundsIncludingMargins();
+      var cleanedUpBeforeResize = _this.beforeResize.cleanUpBeforeResizeItemHeights(prevState);
 
-      _this.latestLayoutVisibleAreaIncludingMargins = visibleAreaIncludingMargins;
+      if (cleanedUpBeforeResize !== undefined) {
+        var scrollBy = cleanedUpBeforeResize.scrollBy,
+            beforeResize = cleanedUpBeforeResize.beforeResize;
+        (0, _debug["default"])('Correct scroll position by', scrollBy);
 
-      var listTopOffsetInsideScrollableContainer = _this.getListTopOffsetInsideScrollableContainer(); // Get shown item indexes.
+        _this.scroll.scrollByY(scrollBy);
 
+        stateUpdate = _objectSpread(_objectSpread({}, stateUpdate), {}, {
+          beforeResize: beforeResize
+        });
+      }
 
-      var _this$layout$getShown = _this.layout.getShownItemIndexes({
-        listHeight: _this.screen.getElementHeight(_this.getContainerElement()),
-        itemsCount: _this.getItemsCount(),
-        visibleAreaIncludingMargins: visibleAreaIncludingMargins,
-        listTopOffsetInsideScrollableContainer: listTopOffsetInsideScrollableContainer
-      }),
-          firstShownItemIndex = _this$layout$getShown.firstShownItemIndex,
-          lastShownItemIndex = _this$layout$getShown.lastShownItemIndex,
-          redoLayoutAfterMeasuringItemHeights = _this$layout$getShown.redoLayoutAfterMeasuringItemHeights; // If scroll position is scheduled to be restored after render,
+      if (layoutUpdateReason) {
+        _this.updateStateRightAfterRender({
+          stateUpdate: stateUpdate,
+          reason: layoutUpdateReason
+        });
+      } else if (stateUpdate) {
+        _this.setState(stateUpdate);
+      }
+    });
+
+    _defineProperty(this, "updateShownItemIndexes", function (_ref) {
+      var stateUpdate = _ref.stateUpdate;
+      var startedAt = Date.now(); // Get shown item indexes.
+
+      var _this$getShownItemInd = _this.getShownItemIndexes(),
+          firstShownItemIndex = _this$getShownItemInd.firstShownItemIndex,
+          lastShownItemIndex = _this$getShownItemInd.lastShownItemIndex,
+          shownItemsHeight = _this$getShownItemInd.shownItemsHeight,
+          firstNonMeasuredItemIndex = _this$getShownItemInd.firstNonMeasuredItemIndex; // If scroll position is scheduled to be restored after render,
       // then the "anchor" item must be rendered, and all of the prepended
       // items before it, all in a single pass. This way, all of the
       // prepended items' heights could be measured right after the render
       // has finished, and the scroll position can then be immediately restored.
 
 
-      if (_this.restoreScroll.shouldRestoreScrollAfterRender()) {
-        if (lastShownItemIndex < _this.restoreScroll.getAnchorItemIndex()) {
-          lastShownItemIndex = _this.restoreScroll.getAnchorItemIndex();
+      if (_this.listHeightChangeWatcher.hasSnapshot()) {
+        if (lastShownItemIndex < _this.listHeightChangeWatcher.getAnchorItemIndex()) {
+          lastShownItemIndex = _this.listHeightChangeWatcher.getAnchorItemIndex();
         } // `firstShownItemIndex` is always `0` when prepending items.
         // And `lastShownItemIndex` always covers all prepended items in this case.
         // None of the prepended items have been rendered before,
         // so their heights are unknown. The code at the start of this function
-        // did therefore set `redoLayoutAfterMeasuringItemHeights` to `true`
+        // did therefore set `firstNonMeasuredItemIndex` to non-`undefined`
         // in order to render just the first prepended item in order to
         // measure it, and only then make a decision on how many other
         // prepended items to render. But since we've instructed the code
@@ -203,7 +298,7 @@ function () {
         // right after the first one.
 
 
-        redoLayoutAfterMeasuringItemHeights = false;
+        firstNonMeasuredItemIndex = undefined;
       } // Validate the heights of items to be hidden on next render.
       // For example, a user could click a "Show more" button,
       // or an "Expand YouTube video" button, which would result
@@ -213,17 +308,27 @@ function () {
 
 
       if (!_this.validateWillBeHiddenItemHeightsAreAccurate(firstShownItemIndex, lastShownItemIndex)) {
-        // Redo layout, now with the correct item heights.
-        (0, _debug["default"])('~ Some of the will-be-hidden item heights have changed since they\'ve last been measured. Redo layout. ~');
-        return _this.updateShownItemIndexes();
+        (0, _debug["default"])('~ 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.
+
+        return _this.updateShownItemIndexes({
+          stateUpdate: stateUpdate
+        });
       } // Measure "before" items height.
 
 
-      var beforeItemsHeight = _this.layout.getBeforeItemsHeight(firstShownItemIndex, lastShownItemIndex); // Measure "after" items height.
+      var beforeItemsHeight = _this.layout.getBeforeItemsHeight(firstShownItemIndex); // Measure "after" items height.
+
 
+      var afterItemsHeight = _this.layout.getAfterItemsHeight(lastShownItemIndex, _this.getItemsCount());
 
-      var afterItemsHeight = _this.layout.getAfterItemsHeight(firstShownItemIndex, lastShownItemIndex, _this.getItemsCount()); // Debugging.
+      var layoutDuration = Date.now() - startedAt; // Debugging.
 
+      (0, _debug["default"])('~ Layout values ' + (_this.bypass ? '(bypass) ' : '') + '~');
+
+      if (layoutDuration < SLOW_LAYOUT_DURATION) {// log('Calculated in', layoutDuration, 'ms')
+      } else {
+        (0, _debug.warn)('Layout calculated in', layoutDuration, 'ms');
+      }
 
       if (_this._getColumnsCount) {
         (0, _debug["default"])('Columns count', _this.getColumnsCount());
@@ -233,56 +338,123 @@ function () {
       (0, _debug["default"])('Last shown item index', lastShownItemIndex);
       (0, _debug["default"])('Before items height', beforeItemsHeight);
       (0, _debug["default"])('After items height (actual or estimated)', afterItemsHeight);
-      (0, _debug["default"])('Average item height (calculated on previous render)', _this.itemHeights.getAverage());
+      (0, _debug["default"])('Average item height (used for estimated after items height calculation)', _this.itemHeights.getAverage());
 
       if ((0, _debug.isDebug)()) {
         (0, _debug["default"])('Item heights', _this.getState().itemHeights.slice());
         (0, _debug["default"])('Item states', _this.getState().itemStates.slice());
-      }
-
-      if (redoLayoutAfterMeasuringItemHeights) {
-        // `this.redoLayoutReason` will be detected in `didUpdateState()`.
-        // `didUpdateState()` is triggered by `this.setState()` below.
-        _this.redoLayoutReason = _Layout.LAYOUT_REASON.ITEM_HEIGHT_NOT_MEASURED;
       } // Optionally preload items to be rendered.
 
 
-      _this.onBeforeShowItems(_this.getState().items, _this.getState().itemHeights, firstShownItemIndex, lastShownItemIndex); // Render.
+      _this.onBeforeShowItems(_this.getState().items, _this.getState().itemHeights, firstShownItemIndex, lastShownItemIndex); // Set `this.firstNonMeasuredItemIndex`.
 
 
-      _this.setState({
+      _this.firstNonMeasuredItemIndex = firstNonMeasuredItemIndex; // Set "previously calculated layout".
+      //
+      // The "previously calculated layout" feature is not currently used.
+      //
+      // The current layout snapshot could be stored as a "previously calculated layout" variable
+      // so that it could theoretically be used when calculating new layout incrementally
+      // rather than from scratch, which would be an optimization.
+      //
+      // Currently, this feature is not used, and `shownItemsHeight` property
+      // is not returned at all, so don't set any "previously calculated layout".
+      //
+
+      if (shownItemsHeight === undefined) {
+        _this.previouslyCalculatedLayout = undefined;
+      } else {
+        // If "previously calculated layout" feature would be implmeneted,
+        // then this code would set "previously calculate layout" instance variable.
+        //
+        // What for would this instance variable be used?
+        //
+        // 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)`.
+        //
+        // If, for example, an item height was updated externally via `.onItemHeightChange(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".
+        // On the other hand, same values in `this.previouslyCalculatedLayout` instance variable
+        // can also be updated immediately, so they won't go out of sync with the updated item height.
+        // That seems the only edge case when using a separate `this.previouslyCalculatedLayout`
+        // instance variable instead of using `this.getState()` would theoretically be justified.
+        //
+        _this.previouslyCalculatedLayout = {
+          firstShownItemIndex: firstShownItemIndex,
+          lastShownItemIndex: lastShownItemIndex,
+          beforeItemsHeight: beforeItemsHeight,
+          shownItemsHeight: shownItemsHeight
+        };
+      } // Update `VirtualScroller` state.
+      // `VirtualScroller` automatically re-renders on state updates.
+      //
+      // All `state` properties updated here should be overwritten in
+      // the implementation of `setItems()` and `onResize()` methods
+      // so that the `state` is not left in an inconsistent state
+      // whenever there're concurrent `setState()` updates that could
+      // possibly conflict with one another — instead, those state updates
+      // should overwrite each other in terms of priority.
+      // These "on scroll" updates have the lowest priority compared to
+      // the state updates originating from `setItems()` and `onResize()` methods.
+      //
+
+
+      _this.setState(_objectSpread({
         firstShownItemIndex: firstShownItemIndex,
         lastShownItemIndex: lastShownItemIndex,
         beforeItemsHeight: beforeItemsHeight,
-        afterItemsHeight: afterItemsHeight // // Average item height is stored in state to differentiate between
-        // // the initial state and "anything has been measured already" state.
-        // averageItemHeight: this.itemHeights.getAverage()
-
-      });
+        afterItemsHeight: afterItemsHeight
+      }, stateUpdate));
     });
 
-    _defineProperty(this, "onUpdateShownItemIndexes", function (_ref) {
-      var reason = _ref.reason;
+    _defineProperty(this, "onUpdateShownItemIndexes", function (_ref2) {
+      var reason = _ref2.reason,
+          stateUpdate = _ref2.stateUpdate;
+
+      // In case of "don't do anything".
+      var skip = function skip() {
+        if (stateUpdate) {
+          _this.setState(stateUpdate);
+        }
+      }; // 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.
+
+
+      if (_this.newItemsWillBeRendered || _this.resetLayoutAfterResize || _this.isResizing) {
+        return skip();
+      } // If there're no items then there's no need to re-layout anything.
+
 
-      // If there're no items then there's no need to re-layout anything.
       if (_this.getItemsCount() === 0) {
-        return;
+        return skip();
       } // Cancel a "re-layout when user stops scrolling" timer.
 
 
-      _this.scroll.onLayout(); // Cancel a re-layout that is scheduled to run at the next "frame",
+      _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.
 
 
-      if (_this.layoutTimer) {
-        (0, _requestAnimationFrameTimeout.clearTimeout)(_this.layoutTimer);
-        _this.layoutTimer = undefined;
-      } // Perform a re-layout.
-
+      stateUpdate = _this.cancelLayoutTimer({
+        stateUpdate: stateUpdate
+      }); // Perform a re-layout.
 
-      (0, _debug["default"])("~ Calculate Layout (on ".concat(reason, ") ~"));
+      (0, _debug["default"])("~ Update Layout (on ".concat(reason, ") ~"));
 
-      _this.updateShownItemIndexes();
+      _this.updateShownItemIndexes({
+        stateUpdate: stateUpdate
+      });
     });
 
     _defineProperty(this, "updateLayout", function () {
@@ -295,12 +467,8 @@ function () {
       return _this.updateLayout();
     });
 
-    var getState = options.getState,
-        setState = options.setState,
-        onStateChange = options.onStateChange,
+    var onStateChange = options.onStateChange,
         customState = options.customState,
-        preserveScrollPositionAtBottomOnMount = options.preserveScrollPositionAtBottomOnMount,
-        preserveScrollPositionOfTheBottomOfTheListOnMount = options.preserveScrollPositionOfTheBottomOfTheListOnMount,
         initialScrollPosition = options.initialScrollPosition,
         onScrollPositionChange = options.onScrollPositionChange,
         measureItemsBatchSize = options.measureItemsBatchSize,
@@ -308,14 +476,17 @@ function () {
         getColumnsCount = options.getColumnsCount,
         getItemId = options.getItemId,
         tbody = options.tbody,
-        _useTimeoutInRenderLoop = options._useTimeoutInRenderLoop;
+        _useTimeoutInRenderLoop = options._useTimeoutInRenderLoop,
+        _waitForScrollingToStop = options._waitForScrollingToStop;
+    var getState = options.getState,
+        setState = options.setState;
     var bypass = options.bypass,
         estimatedItemHeight = options.estimatedItemHeight,
         onItemInitialRender = options.onItemInitialRender,
         onItemFirstRender = options.onItemFirstRender,
         scrollableContainer = options.scrollableContainer,
         state = options.state,
-        renderingEngine = options.renderingEngine;
+        engine = options.engine;
     (0, _debug["default"])('~ Initialize ~'); // If `state` is passed then use `items` from `state`
     // instead of the `items` argument.
 
@@ -331,23 +502,42 @@ function () {
     // For example, React Native, `<canvas/>`, etc.
 
 
-    if (!renderingEngine) {
-      renderingEngine = _RenderingEngine["default"];
+    if (!engine) {
+      engine = _Engine["default"];
+    } // Sometimes, when `new VirtualScroller()` instance is created,
+    // `getItemsContainerElement()` might not be ready to return the "container" DOM Element yet
+    // (for example, because it's not rendered yet). That's the reason why it's a getter function.
+    // For example, in React `<VirtualScroller/>` component, a `VirtualScroller`
+    // instance is created in the React component's `constructor()`, and at that time
+    // the container Element is not yet available. The container Element is available
+    // in `componentDidMount()`, but `componentDidMount()` is not executed on server,
+    // which would mean that React `<VirtualScroller/>` wouldn't render at all
+    // on server side, while with the `getItemsContainerElement()` approach, on server side,
+    // it still "renders" a list with a predefined amount of items in it by default.
+    // (`initiallyRenderedItemsCount`, or `1`).
+
+
+    this.getItemsContainerElement = getItemsContainerElement;
+    this.itemsContainer = engine.createItemsContainer(getItemsContainerElement); // Remove any accidental text nodes from container (like whitespace).
+    // Also guards against cases when someone accidentally tries
+    // using `VirtualScroller` on a non-empty element.
+
+    if (getItemsContainerElement()) {
+      this.itemsContainer.clear();
     }
 
-    this.screen = renderingEngine.createScreen();
-    this.scrollableContainer = renderingEngine.createScrollableContainer(scrollableContainer); // if (margin === undefined) {
-    // 	// Renders items which are outside of the screen by this "margin".
+    this.scrollableContainer = engine.createScrollableContainer(scrollableContainer, getItemsContainerElement); // if (prerenderMargin === undefined) {
+    // 	// Renders items which are outside of the screen by this "prerender margin".
     // 	// Is the screen height by default: seems to be the optimal value
     // 	// for "Page Up" / "Page Down" navigation and optimized mouse wheel scrolling.
-    // 	margin = this.scrollableContainer ? this.scrollableContainer.getHeight() : 0
+    // 	prerenderMargin = this.scrollableContainer ? this.scrollableContainer.getHeight() : 0
     // }
     // Work around `<tbody/>` not being able to have `padding`.
     // https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1
 
     if (tbody) {
-      if (renderingEngine.name !== 'DOM') {
-        throw new Error('`tbody` option is only supported for DOM rendering engine');
+      if (engine !== _Engine["default"]) {
+        throw new Error('[virtual-scroller] `tbody` option is only supported for DOM rendering engine');
       }
 
       (0, _debug["default"])('~ <tbody/> detected ~');
@@ -394,7 +584,7 @@ function () {
       };
     }
 
-    this.initialItems = items; // this.margin = margin
+    this.initialItems = items; // this.prerenderMargin = prerenderMargin
 
     this.onStateChange = onStateChange;
     this._getColumnsCount = getColumnsCount;
@@ -403,95 +593,149 @@ function () {
       this.onItemInitialRender = onItemInitialRender;
     } // `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
     else if (onItemFirstRender) {
-        this.onItemInitialRender = function (item) {
-          (0, _debug.warn)('`onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.');
-
-          var _this$getState = _this.getState(),
-              items = _this$getState.items;
-
-          var i = items.indexOf(item); // The `item` could also be non-found due to the inconsistency bug:
-          // The reason is that `i` can be non-consistent with the `items`
-          // passed to `<VirtualScroller/>` in React due to `setState()` not being
-          // instanteneous: when new `items` are passed to `<VirtualScroller/>`,
-          // `VirtualScroller.setState({ items })` is called, and if `onItemFirstRender(i)`
-          // is called after the aforementioned `setState()` is called but before it finishes,
-          // `i` would point to an index in "previous" `items` while the application
-          // would assume that `i` points to an index in the "new" `items`,
-          // resulting in an incorrect item being assumed by the application
-          // or even in an "array index out of bounds" error.
-
-          if (i >= 0) {
-            onItemFirstRender(i);
-          }
-        };
-      }
+      this.onItemInitialRender = function (item) {
+        (0, _debug.warn)('`onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.');
+
+        var _this$getState = _this.getState(),
+            items = _this$getState.items;
+
+        var i = items.indexOf(item); // The `item` could also be non-found due to the inconsistency bug:
+        // The reason is that `i` can be non-consistent with the `items`
+        // passed to `<VirtualScroller/>` in React due to `setState()` not being
+        // instanteneous: when new `items` are passed to `<VirtualScroller/>`,
+        // `VirtualScroller.setState({ items })` is called, and if `onItemFirstRender(i)`
+        // is called after the aforementioned `setState()` is called but before it finishes,
+        // `i` would point to an index in "previous" `items` while the application
+        // would assume that `i` points to an index in the "new" `items`,
+        // resulting in an incorrect item being assumed by the application
+        // or even in an "array index out of bounds" error.
+
+        if (i >= 0) {
+          onItemFirstRender(i);
+        }
+      };
+    }
 
     (0, _debug["default"])('Items count', items.length);
 
     if (estimatedItemHeight) {
       (0, _debug["default"])('Estimated item height', estimatedItemHeight);
-    }
-
-    if (setState) {
-      this.getState = getState;
-
-      this.setState = function (state) {
-        (0, _debug["default"])('Set state', state);
-        setState(state, {
-          willUpdateState: _this.willUpdateState,
-          didUpdateState: _this.didUpdateState
-        });
-      };
-    } else {
-      this.getState = function () {
+    } // There're three main places where state is updated:
+    //
+    // * On scroll.
+    // * On window resize.
+    // * On set new items.
+    //
+    // State updates may be "asynchronous" (like in React), in which case the
+    // corresponding operation is "pending" until the state update is applied.
+    //
+    // If there's a "pending" window resize or a "pending" update of the set of items,
+    // then "on scroll" updates aren't dispatched.
+    //
+    // If there's a "pending" on scroll update and the window is resize or a new set
+    // of items is set, then that "pending" on scroll update gets overwritten.
+    //
+    // If there's a "pending" update of the set of items, then window resize handler
+    // sees that "pending" update and dispatches its own state update so that the
+    // "pending" state update originating from `setItems()` is not lost.
+    //
+    // If there's a "pending" window resize, and a new set of items is set,
+    // then the state update of the window resize handler gets overwritten.
+    // Create default `getState()`/`setState()` functions.
+
+
+    if (!getState) {
+      getState = function getState() {
         return _this.state;
       };
 
-      this.setState = function (state) {
-        (0, _debug["default"])('Set state', state);
-
-        var prevState = _this.getState(); // Because this variant of `.setState()` is "synchronous" (immediate),
+      setState = function setState(stateUpdate, _ref3) {
+        var willUpdateState = _ref3.willUpdateState,
+            didUpdateState = _ref3.didUpdateState;
+        var prevState = getState(); // Because this variant of `.setState()` is "synchronous" (immediate),
         // it can be written like `...prevState`, and no state updates would be lost.
         // But if it was "asynchronous" (not immediate), then `...prevState`
         // wouldn't work in all cases, because it could be stale in cases
         // when more than a single `setState()` call is made before
         // the state actually updates, making `prevState` stale.
 
+        var newState = _objectSpread(_objectSpread({}, prevState), stateUpdate);
 
-        var newState = _objectSpread({}, prevState, state);
-
-        _this.willUpdateState(newState, prevState);
+        willUpdateState(newState, prevState);
+        _this.state = newState; // // Is only used in tests.
+        // if (this._onStateUpdate) {
+        // 	this._onStateUpdate(stateUpdate)
+        // }
 
-        _this.state = newState;
-
-        _this.didUpdateState(prevState);
+        didUpdateState(prevState);
       };
     }
 
+    this.getState = getState;
+
+    this.setState = function (stateUpdate) {
+      if ((0, _debug.isDebug)()) {
+        (0, _debug["default"])('Set state', (0, _getStateSnapshot["default"])(stateUpdate));
+      }
+
+      setState(stateUpdate, {
+        willUpdateState: _this.willUpdateState,
+        didUpdateState: _this.didUpdateState
+      });
+    };
+
     if (state) {
-      (0, _debug["default"])('Initial state (passed)', state);
-    } // Sometimes, when `new VirtualScroller()` instance is created,
-    // `getContainerElement()` might not be ready to return the "container" DOM Element yet
-    // (for example, because it's not rendered yet). That's the reason why it's a getter function.
-    // For example, in React `<VirtualScroller/>` component, a `VirtualScroller`
-    // instance is created in the React component's `constructor()`, and at that time
-    // the container Element is not yet available. The container Element is available
-    // in `componentDidMount()`, but `componentDidMount()` is not executed on server,
-    // which would mean that React `<VirtualScroller/>` wouldn't render at all
-    // on server side, while with the `getContainerElement()` approach, on server side,
-    // it still "renders" a list with a predefined amount of items in it by default.
-    // (`initiallyRenderedItemsCount`, or `1`).
+      if ((0, _debug.isDebug)()) {
+        (0, _debug["default"])('Initial state (passed)', (0, _getStateSnapshot["default"])(state));
+      }
+    } // Check if the current `columnsCount` matches the one from state.
+    // For example, a developer might snapshot `VirtualScroller` state
+    // when the user navigates from the page containing the list
+    // in order to later restore the list's state when the user goes "Back".
+    // But, the user might have also resized the window while being on that
+    // "other" page, and when they come "Back", their snapshotted state
+    // no longer qualifies. Well, it does qualify, but only partially.
+    // For example, `itemStates` are still valid, but first and last shown
+    // item indexes aren't.
 
 
-    this.getContainerElement = getContainerElement; // Remove any accidental text nodes from container (like whitespace).
-    // Also guards against cases when someone accidentally tries
-    // using `VirtualScroller` on a non-empty element.
+    if (state) {
+      var shouldResetLayout;
+      var columnsCountForState = this.getActualColumnsCountForState();
+
+      if (columnsCountForState !== state.columnsCount) {
+        (0, _debug.warn)('~ Columns Count changed from', state.columnsCount || 1, 'to', columnsCountForState || 1, '~');
+        shouldResetLayout = true;
+      }
+
+      var columnsCount = this.getActualColumnsCount();
+      var firstShownItemIndex = Math.floor(state.firstShownItemIndex / columnsCount) * columnsCount;
+
+      if (firstShownItemIndex !== state.firstShownItemIndex) {
+        (0, _debug.warn)('~ First Shown Item Index', state.firstShownItemIndex, 'is not divisible by Columns Count', columnsCount, '~');
+        shouldResetLayout = true;
+      }
+
+      if (shouldResetLayout) {
+        (0, _debug.warn)('Reset Layout');
+        state = _objectSpread(_objectSpread({}, state), this.getInitialLayoutState(state.items));
+      }
+    } // Reset `verticalSpacing` so that it re-measures it after the list
+    // has been rendered initially. The rationale is that the `state`
+    // can't be "trusted" in a sense that the user might have resized
+    // their window after the `state` has been snapshotted, and changing
+    // window width might have activated different CSS `@media()` "queries"
+    // resulting in a potentially different vertical spacing.
+
+
+    if (state) {
+      state = _objectSpread(_objectSpread({}, state), {}, {
+        verticalSpacing: undefined
+      });
+    } // Create `ItemHeights` instance.
 
-    if (getContainerElement()) {
-      this.screen.clearElement(getContainerElement());
-    }
 
-    this.itemHeights = new _ItemHeights["default"](this.screen, this.getContainerElement, function (i) {
+    this.itemHeights = new _ItemHeights["default"](this.itemsContainer, function (i) {
       return _this.getState().itemHeights[i];
     }, function (i, height) {
       return _this.getState().itemHeights[i] = height;
@@ -505,57 +749,88 @@ function () {
       bypass: bypass,
       estimatedItemHeight: estimatedItemHeight,
       measureItemsBatchSize: measureItemsBatchSize === undefined ? 50 : measureItemsBatchSize,
+      getPrerenderMargin: function getPrerenderMargin() {
+        return _this.getPrerenderMargin();
+      },
       getVerticalSpacing: function getVerticalSpacing() {
         return _this.getVerticalSpacing();
       },
+      getVerticalSpacingBeforeResize: function getVerticalSpacingBeforeResize() {
+        return _this.getVerticalSpacingBeforeResize();
+      },
       getColumnsCount: function getColumnsCount() {
         return _this.getColumnsCount();
       },
+      getColumnsCountBeforeResize: function getColumnsCountBeforeResize() {
+        return _this.getState().beforeResize && _this.getState().beforeResize.columnsCount;
+      },
       getItemHeight: function getItemHeight(i) {
         return _this.getState().itemHeights[i];
       },
+      getItemHeightBeforeResize: function getItemHeightBeforeResize(i) {
+        return _this.getState().beforeResize && _this.getState().beforeResize.itemHeights[i];
+      },
+      getBeforeResizeItemsCount: function getBeforeResizeItemsCount() {
+        return _this.getState().beforeResize ? _this.getState().beforeResize.itemHeights.length : 0;
+      },
       getAverageItemHeight: function getAverageItemHeight() {
         return _this.itemHeights.getAverage();
+      },
+      getMaxVisibleAreaHeight: function getMaxVisibleAreaHeight() {
+        return _this.scrollableContainer && _this.scrollableContainer.getHeight();
+      },
+      //
+      // The "previously calculated layout" feature is not currently used.
+      //
+      // The current layout snapshot could be stored as a "previously calculated layout" variable
+      // so that it could theoretically be used when calculating new layout incrementally
+      // rather than from scratch, which would be an optimization.
+      //
+      getPreviouslyCalculatedLayout: function getPreviouslyCalculatedLayout() {
+        return _this.previouslyCalculatedLayout;
       }
     });
     this.resize = new _Resize["default"]({
       bypass: bypass,
       scrollableContainer: this.scrollableContainer,
-      getContainerElement: this.getContainerElement,
-      updateLayout: function updateLayout(_ref2) {
-        var reason = _ref2.reason;
+      onStart: function onStart() {
+        (0, _debug["default"])('~ Scrollable container resize started ~');
+        _this.isResizing = true;
+      },
+      onStop: function onStop() {
+        (0, _debug["default"])('~ Scrollable container resize finished ~');
+        _this.isResizing = undefined;
+      },
+      onNoChange: function onNoChange() {
+        // There might have been some missed `this.onUpdateShownItemIndexes()` calls
+        // due to setting `this.isResizing` flag to `true` during the resize.
+        // So, update shown item indexes just in case.
+        _this.onUpdateShownItemIndexes({
+          reason: _Layout.LAYOUT_REASON.VIEWPORT_SIZE_UNCHANGED
+        });
+      },
+      onHeightChange: function onHeightChange() {
         return _this.onUpdateShownItemIndexes({
-          reason: reason
+          reason: _Layout.LAYOUT_REASON.VIEWPORT_HEIGHT_CHANGED
         });
       },
-      resetStateAndLayout: function resetStateAndLayout() {
-        // Reset item heights, because if scrollable container's width (or height)
-        // has changed, then the list width (or height) most likely also has changed,
-        // and also some CSS `@media()` rules might have been added or removed.
-        // So re-render the list entirely.
-        (0, _debug["default"])('~ Scrollable container size changed, re-measure item heights. ~');
-        _this.redoLayoutReason = _Layout.LAYOUT_REASON.RESIZE; // `this.layoutResetPending` flag will be cleared in `didUpdateState()`.
-
-        _this.layoutResetPending = true;
-        (0, _debug["default"])('Reset state'); // Calling `this.setState(state)` will trigger `didUpdateState()`.
-        // `didUpdateState()` will detect `this.redoLayoutReason`.
+      onWidthChange: function onWidthChange(prevWidth, newWidth) {
+        (0, _debug["default"])('~ Scrollable container width changed from', prevWidth, 'to', newWidth, '~');
 
-        _this.setState(_this.getInitialLayoutState(_this.newItemsPending || _this.getState().items));
+        _this.onResize();
       }
     });
-
-    if (preserveScrollPositionAtBottomOnMount) {
-      (0, _debug.warn)('`preserveScrollPositionAtBottomOnMount` option/property has been renamed to `preserveScrollPositionOfTheBottomOfTheListOnMount`');
-    }
-
-    this.preserveScrollPositionOfTheBottomOfTheListOnMount = preserveScrollPositionOfTheBottomOfTheListOnMount || preserveScrollPositionAtBottomOnMount;
     this.scroll = new _Scroll["default"]({
       bypass: this.bypass,
       scrollableContainer: this.scrollableContainer,
-      updateLayout: function updateLayout(_ref3) {
-        var reason = _ref3.reason;
-        return _this.onUpdateShownItemIndexes({
-          reason: reason
+      itemsContainer: this.itemsContainer,
+      waitForScrollingToStop: _waitForScrollingToStop,
+      onScroll: function onScroll() {
+        var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+            delayed = _ref4.delayed;
+
+        _this.onUpdateShownItemIndexes({
+          reason: delayed ? _Layout.LAYOUT_REASON.STOPPED_SCROLLING : _Layout.LAYOUT_REASON.SCROLL
         });
       },
       initialScrollPosition: initialScrollPosition,
@@ -569,24 +844,53 @@ function () {
       hasNonRenderedItemsAtTheBottom: function hasNonRenderedItemsAtTheBottom() {
         return _this.getState().lastShownItemIndex < _this.getItemsCount() - 1;
       },
-      getLatestLayoutVisibleAreaIncludingMargins: function getLatestLayoutVisibleAreaIncludingMargins() {
-        return _this.latestLayoutVisibleAreaIncludingMargins;
+      getLatestLayoutVisibleArea: function getLatestLayoutVisibleArea() {
+        return _this.latestLayoutVisibleArea;
       },
-      preserveScrollPositionOfTheBottomOfTheListOnMount: this.preserveScrollPositionOfTheBottomOfTheListOnMount
-    });
-    this.restoreScroll = new _RestoreScroll["default"]({
-      screen: this.screen,
-      getContainerElement: this.getContainerElement
+      getListTopOffset: this.getListTopOffsetInsideScrollableContainer,
+      getPrerenderMargin: function getPrerenderMargin() {
+        return _this.getPrerenderMargin();
+      }
     });
-    this.waitForStylesToLoad = new _WaitForStylesToLoad["default"]({
-      updateLayout: function updateLayout(_ref4) {
-        var reason = _ref4.reason;
-        return _this.onUpdateShownItemIndexes({
-          reason: reason
-        });
-      },
-      getListTopOffsetInsideScrollableContainer: this.getListTopOffsetInsideScrollableContainer
+    this.listHeightChangeWatcher = new _ListHeightChangeWatcher["default"]({
+      itemsContainer: this.itemsContainer,
+      getListTopOffset: this.getListTopOffsetInsideScrollableContainer
     });
+
+    if (engine.watchListTopOffset) {
+      this.listTopOffsetWatcher = engine.watchListTopOffset({
+        getListTopOffset: this.getListTopOffsetInsideScrollableContainer,
+        onListTopOffsetChange: function onListTopOffsetChange(_ref5) {
+          var reason = _ref5.reason;
+          return _this.onUpdateShownItemIndexes({
+            reason: _Layout.LAYOUT_REASON.TOP_OFFSET_CHANGED
+          });
+        }
+      });
+    }
+
+    this.beforeResize = new _BeforeResize["default"]({
+      getState: this.getState,
+      getVerticalSpacing: this.getVerticalSpacing,
+      getColumnsCount: this.getColumnsCount
+    }); // Possibly clean up "before resize" property in state.
+    // "Before resize" state property is cleaned up when all "before resize" item heights
+    // have been re-measured in an asynchronous `this.setState({ beforeResize: undefined })` call.
+    // If `VirtualScroller` state was snapshotted externally before that `this.setState()` call
+    // has been applied, then "before resize" property might have not been cleaned up properly.
+
+    this.beforeResize.onInitialState(state); // `this.verticalSpacing` acts as a "true" source for vertical spacing value.
+    // Vertical spacing is also stored in `state` but `state` updates could be
+    // "asynchronous" (not applied immediately) and `this.onUpdateShownItemIndexes()`
+    // requires vertical spacing to be correct at any time, without any delays.
+    // So, vertical spacing is also duplicated in `state`, but the "true" source
+    // is still `this.verticalSpacing`.
+    //
+    // `this.verticalSpacing` must be initialized before calling `this.getInitialState()`.
+    //
+
+    this.verticalSpacing = state ? state.verticalSpacing : undefined; // Set initial `state`.
+
     this.setState(state || this.getInitialState(customState));
   }
   /**
@@ -601,63 +905,64 @@ function () {
     value: function getInitialState(customState) {
       var items = this.initialItems;
 
-      var state = _objectSpread({}, customState, this.getInitialLayoutState(items), {
+      var state = _objectSpread(_objectSpread(_objectSpread({}, customState), this.getInitialLayoutState(items)), {}, {
         items: items,
         itemStates: new Array(items.length)
       });
 
-      (0, _debug["default"])('Initial state (autogenerated)', state);
+      if ((0, _debug.isDebug)()) {
+        (0, _debug["default"])('Initial state (autogenerated)', (0, _getStateSnapshot["default"])(state));
+      }
+
       (0, _debug["default"])('First shown item index', state.firstShownItemIndex);
       (0, _debug["default"])('Last shown item index', state.lastShownItemIndex);
       return state;
     }
-  }, {
-    key: "getInitialLayoutValues",
-    value: function getInitialLayoutValues(_ref5) {
-      var itemsCount = _ref5.itemsCount,
-          bypass = _ref5.bypass;
-      return this.layout.getInitialLayoutValues({
-        bypass: bypass,
-        itemsCount: itemsCount,
-        visibleAreaHeightIncludingMargins: this.scrollableContainer && 2 * this.getMargin() + this.scrollableContainer.getHeight()
-      });
-    }
   }, {
     key: "getInitialLayoutState",
     value: function getInitialLayoutState(items) {
       var itemsCount = items.length;
 
-      var _this$getInitialLayou = this.getInitialLayoutValues({
+      var _this$layout$getIniti = this.layout.getInitialLayoutValues({
         itemsCount: itemsCount,
-        bypass: this.preserveScrollPositionOfTheBottomOfTheListOnMount
+        columnsCount: this.getColumnsCount()
       }),
-          firstShownItemIndex = _this$getInitialLayou.firstShownItemIndex,
-          lastShownItemIndex = _this$getInitialLayou.lastShownItemIndex,
-          beforeItemsHeight = _this$getInitialLayou.beforeItemsHeight,
-          afterItemsHeight = _this$getInitialLayou.afterItemsHeight;
+          firstShownItemIndex = _this$layout$getIniti.firstShownItemIndex,
+          lastShownItemIndex = _this$layout$getIniti.lastShownItemIndex,
+          beforeItemsHeight = _this$layout$getIniti.beforeItemsHeight,
+          afterItemsHeight = _this$layout$getIniti.afterItemsHeight;
 
       var itemHeights = new Array(itemsCount); // Optionally preload items to be rendered.
 
-      this.onBeforeShowItems(items, itemHeights, firstShownItemIndex, lastShownItemIndex); // This "initial" state object must include all possible state properties
-      // because `this.setState()` gets called with this state on window resize,
-      // when `VirtualScroller` gets reset.
-      // Item states aren't included here because the state of all items should be
-      // preserved on window resize.
-
+      this.onBeforeShowItems(items, itemHeights, firstShownItemIndex, lastShownItemIndex);
       return {
         itemHeights: itemHeights,
-        columnsCount: this._getColumnsCount ? this._getColumnsCount(this.scrollableContainer) : undefined,
-        verticalSpacing: undefined,
+        columnsCount: this.getActualColumnsCountForState(),
+        verticalSpacing: this.verticalSpacing,
         firstShownItemIndex: firstShownItemIndex,
         lastShownItemIndex: lastShownItemIndex,
         beforeItemsHeight: beforeItemsHeight,
         afterItemsHeight: afterItemsHeight
       };
-    }
+    } // Bind to `this` in order to prevent bugs when this function is passed by reference
+    // and then called with its `this` being unintentionally `window` resulting in
+    // the `if` condition being "falsy".
+
+  }, {
+    key: "getActualColumnsCount",
+    value: function getActualColumnsCount() {
+      return this.getActualColumnsCountForState() || 1;
+    } // Bind to `this` in order to prevent bugs when this function is passed by reference
+    // and then called with its `this` being unintentionally `window` resulting in
+    // the `if` condition being "falsy".
+
   }, {
-    key: "getVerticalSpacing",
-    value: function getVerticalSpacing() {
-      return this.getState() && this.getState().verticalSpacing || 0;
+    key: "getVerticalSpacingBeforeResize",
+    value: function getVerticalSpacingBeforeResize() {
+      // `beforeResize.verticalSpacing` can be `undefined`.
+      // For example, if `this.setState({ verticalSpacing })` call hasn't been applied
+      // before the resize happened (in case of an "asynchronous" state update).
+      return this.getState().beforeResize && this.getState().beforeResize.verticalSpacing || 0;
     }
   }, {
     key: "getColumnsCount",
@@ -670,15 +975,19 @@ function () {
       return this.getState().items.length;
     }
   }, {
-    key: "getMargin",
-    value: function getMargin() {
-      // `VirtualScroller` also items that are outside of the screen
-      // by the amount of this "render ahead margin" (both on top and bottom).
-      // The default "render ahead margin" is equal to the screen height:
+    key: "getPrerenderMargin",
+    value: function getPrerenderMargin() {
+      // The list component renders not only the items that're currently visible
+      // but also the items that lie within some extra vertical margin (called
+      // "prerender margin") on top and bottom for future scrolling: this way,
+      // there'll be significantly less layout recalculations as the user scrolls,
+      // because now it doesn't have to recalculate layout on each scroll event.
+      // By default, the "prerender margin" is equal to the screen height:
       // this seems to be the optimal value for "Page Up" / "Page Down" navigation
       // and optimized mouse wheel scrolling (a user is unlikely to continuously
-      // scroll past the height of a screen, and when they stop scrolling,
-      // the list is re-rendered).
+      // scroll past the screen height, because they'd stop to read through
+      // the newly visible items first, and when they do stop scrolling, that's
+      // when layout gets recalculated).
       var renderAheadMarginRatio = 1; // in scrollable container heights.
 
       return this.scrollableContainer.getHeight() * renderAheadMarginRatio;
@@ -734,51 +1043,81 @@ function () {
       // otherwise `DOMVirtualScroller` would enter an infinite re-render loop.
 
       this.isRendered = true;
-      this.onRenderedNewLayout();
+      var stateUpdate = this.measureItemHeightsAndSpacingAndUpdateTablePadding();
       this.resize.listen();
       this.scroll.listen(); // Work around `<tbody/>` not being able to have `padding`.
       // https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1
 
       if (this.tbody) {
-        (0, _tbody.addTbodyStyles)(this.getContainerElement());
-      }
+        (0, _tbody.addTbodyStyles)(this.getItemsContainerElement());
+      } // Re-calculate layout and re-render the list.
+      // Do that even if when an initial `state` parameter, containing layout values,
+      // has been passed. The reason is that the `state` parameter can't be "trusted"
+      // in a way that it could have been snapshotted for another window width and
+      // the user might have resized their window since then.
 
-      if (this.preserveScrollPositionOfTheBottomOfTheListOnMount) {// In this case, all items are shown, so there's no need to call
-        // `this.onUpdateShownItemIndexes()` after the initial render.
-      } else {
-        this.onUpdateShownItemIndexes({
-          reason: _Layout.LAYOUT_REASON.MOUNT
-        });
-      }
+
+      this.onUpdateShownItemIndexes({
+        reason: _Layout.LAYOUT_REASON.MOUNTED,
+        stateUpdate: stateUpdate
+      });
     }
   }, {
-    key: "onRenderedNewLayout",
-    value: function onRenderedNewLayout() {
-      // Update item vertical spacing.
-      this.measureVerticalSpacing(); // Measure "newly shown" item heights.
+    key: "measureItemHeightsAndSpacingAndUpdateTablePadding",
+    value: function measureItemHeightsAndSpacingAndUpdateTablePadding() {
+      // Measure "newly shown" item heights.
       // Also re-validate already measured items' heights.
+      this.itemHeights.measureItemHeights(this.getState().firstShownItemIndex, this.getState().lastShownItemIndex); // Update item vertical spacing.
 
-      this.itemHeights.measureItemHeights(this.getState().firstShownItemIndex, this.getState().lastShownItemIndex); // Update `<tbody/>` `padding`.
+      var verticalSpacing = this.measureVerticalSpacing(); // Update `<tbody/>` `padding`.
       // (`<tbody/>` is different in a way that it can't have `margin`, only `padding`).
       // https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1
 
       if (this.tbody) {
-        (0, _tbody.setTbodyPadding)(this.getContainerElement(), this.getState().beforeItemsHeight, this.getState().afterItemsHeight);
+        (0, _tbody.setTbodyPadding)(this.getItemsContainerElement(), this.getState().beforeItemsHeight, this.getState().afterItemsHeight);
+      } // Return a state update.
+
+
+      if (verticalSpacing !== undefined) {
+        return {
+          verticalSpacing: verticalSpacing
+        };
       }
     }
   }, {
-    key: "getVisibleAreaBoundsIncludingMargins",
-    value: function getVisibleAreaBoundsIncludingMargins() {
+    key: "getVisibleArea",
+    value: function getVisibleArea() {
       var visibleArea = this.scroll.getVisibleAreaBounds();
-      visibleArea.top -= this.getMargin();
-      visibleArea.bottom += this.getMargin();
-      return visibleArea;
+      this.latestLayoutVisibleArea = visibleArea; // Subtract the top offset of the list inside the scrollable container.
+
+      var listTopOffsetInsideScrollableContainer = this.getListTopOffsetInsideScrollableContainer();
+      return {
+        top: visibleArea.top - listTopOffsetInsideScrollableContainer,
+        bottom: visibleArea.bottom - listTopOffsetInsideScrollableContainer
+      };
     }
     /**
      * Returns the list's top offset relative to the scrollable container's top edge.
      * @return {number}
      */
 
+  }, {
+    key: "getItemScrollPosition",
+    value:
+    /**
+     * Returns the items's top offset relative to the scrollable container's top edge.
+     * @param {number} i — Item index
+     * @return {[number]} Returns the item's scroll Y position. Returns `undefined` if any of the previous items haven't been rendered yet.
+     */
+    function getItemScrollPosition(i) {
+      var itemTopOffsetInList = this.layout.getItemTopOffset(i);
+
+      if (itemTopOffsetInList === undefined) {
+        return;
+      }
+
+      return this.getListTopOffsetInsideScrollableContainer() + itemTopOffsetInList;
+    }
   }, {
     key: "onUnmount",
     value: function onUnmount() {
@@ -792,18 +1131,41 @@ function () {
       this.stop();
     }
   }, {
-    key: "stop",
-    value: function stop() {
-      this.isRendered = false;
-      this.resize.stop();
-      this.scroll.stop();
-      this.waitForStylesToLoad.stop();
+    key: "cancelLayoutTimer",
+    value: function cancelLayoutTimer(_ref6) {
+      var stateUpdate = _ref6.stateUpdate;
 
       if (this.layoutTimer) {
         (0, _requestAnimationFrameTimeout.clearTimeout)(this.layoutTimer);
-        this.layoutTimer = undefined;
+        this.layoutTimer = undefined; // Merge state updates.
+
+        if (stateUpdate || this.layoutTimerStateUpdate) {
+          stateUpdate = _objectSpread(_objectSpread({}, this.layoutTimerStateUpdate), stateUpdate);
+          this.layoutTimerStateUpdate = undefined;
+          return stateUpdate;
+        }
+      } else {
+        return stateUpdate;
       }
     }
+  }, {
+    key: "scheduleLayoutTimer",
+    value: function scheduleLayoutTimer(_ref7) {
+      var _this2 = this;
+
+      var reason = _ref7.reason,
+          stateUpdate = _ref7.stateUpdate;
+      this.layoutTimerStateUpdate = stateUpdate;
+      this.layoutTimer = (0, _requestAnimationFrameTimeout.setTimeout)(function () {
+        _this2.layoutTimerStateUpdate = undefined;
+        _this2.layoutTimer = undefined;
+
+        _this2.onUpdateShownItemIndexes({
+          reason: reason,
+          stateUpdate: stateUpdate
+        });
+      }, 0);
+    }
     /**
      * Should be called right before `state` is updated.
      * @param  {object} prevState
@@ -811,11 +1173,115 @@ function () {
      */
 
   }, {
-    key: "redoLayoutRightAfterRender",
-    value: function redoLayoutRightAfterRender(_ref6) {
-      var _this2 = this;
+    key: "onNewItemsRendered",
+    value: // After a new set of items has been rendered:
+    //
+    // * Restores scroll position when using `preserveScrollPositionOnPrependItems`
+    //   and items have been prepended.
+    //
+    // * Applies any "pending" `itemHeights` updates — those ones that happened
+    //   while an asynchronous `setState()` call in `setItems()` was pending.
+    //
+    // * Either creates or resets the snapshot of the current layout.
+    //
+    //   The current layout snapshot could be stored as a "previously calculated layout" variable
+    //   so that it could theoretically be used when calculating new layout incrementally
+    //   rather than from scratch, which would be an optimization.
+    //
+    //   The "previously calculated layout" feature is not currently used.
+    //
+    function onNewItemsRendered(itemsDiff, newLayout) {
+      // If it's an "incremental" update.
+      if (itemsDiff) {
+        var prependedItemsCount = itemsDiff.prependedItemsCount,
+            appendedItemsCount = itemsDiff.appendedItemsCount;
+
+        var _this$getState2 = this.getState(),
+            itemHeights = _this$getState2.itemHeights,
+            itemStates = _this$getState2.itemStates; // See if any items' heights changed while new items were being rendered.
+
+
+        if (this.itemHeightsThatChangedWhileNewItemsWereBeingRendered) {
+          for (var _i = 0, _Object$keys = Object.keys(this.itemHeightsThatChangedWhileNewItemsWereBeingRendered); _i < _Object$keys.length; _i++) {
+            var i = _Object$keys[_i];
+            itemHeights[prependedItemsCount + parseInt(i)] = this.itemHeightsThatChangedWhileNewItemsWereBeingRendered[i];
+          }
+        } // See if any items' states changed while new items were being rendered.
+
+
+        if (this.itemStatesThatChangedWhileNewItemsWereBeingRendered) {
+          for (var _i2 = 0, _Object$keys2 = Object.keys(this.itemStatesThatChangedWhileNewItemsWereBeingRendered); _i2 < _Object$keys2.length; _i2++) {
+            var _i3 = _Object$keys2[_i2];
+            itemStates[prependedItemsCount + parseInt(_i3)] = this.itemStatesThatChangedWhileNewItemsWereBeingRendered[_i3];
+          }
+        }
+
+        if (prependedItemsCount === 0) {
+          // Adjust `this.previouslyCalculatedLayout`.
+          if (this.previouslyCalculatedLayout) {
+            if (this.previouslyCalculatedLayout.firstShownItemIndex === newLayout.firstShownItemIndex && this.previouslyCalculatedLayout.lastShownItemIndex === newLayout.lastShownItemIndex) {// `this.previouslyCalculatedLayout` stays the same.
+              // `firstShownItemIndex` / `lastShownItemIndex` didn't get changed in `setItems()`,
+              // so `beforeItemsHeight` and `shownItemsHeight` also stayed the same.
+            } else {
+              (0, _debug.warn)('Unexpected (non-matching) "firstShownItemIndex" or "lastShownItemIndex" encountered in "didUpdateState()" after appending items');
+              (0, _debug.warn)('Previously calculated layout', this.previouslyCalculatedLayout);
+              (0, _debug.warn)('New layout', newLayout);
+              this.previouslyCalculatedLayout = undefined;
+            }
+          }
+
+          return 'SEAMLESS_APPEND';
+        } else {
+          if (this.listHeightChangeWatcher.hasSnapshot()) {
+            if (newLayout.firstShownItemIndex === 0) {
+              // Restore (adjust) scroll position.
+              (0, _debug["default"])('~ Restore Scroll Position ~');
+              var listBottomOffsetChange = this.listHeightChangeWatcher.getListBottomOffsetChange({
+                beforeItemsHeight: newLayout.beforeItemsHeight
+              });
+              this.listHeightChangeWatcher.reset();
+
+              if (listBottomOffsetChange) {
+                (0, _debug["default"])('Scroll down by', listBottomOffsetChange);
+                this.scroll.scrollByY(listBottomOffsetChange);
+              } else {
+                (0, _debug["default"])('Scroll position hasn\'t changed');
+              } // Create new `this.previouslyCalculatedLayout`.
+
+
+              if (this.previouslyCalculatedLayout) {
+                if (this.previouslyCalculatedLayout.firstShownItemIndex === 0 && this.previouslyCalculatedLayout.lastShownItemIndex === newLayout.lastShownItemIndex - prependedItemsCount) {
+                  this.previouslyCalculatedLayout = {
+                    beforeItemsHeight: 0,
+                    shownItemsHeight: this.previouslyCalculatedLayout.shownItemsHeight + listBottomOffsetChange,
+                    firstShownItemIndex: 0,
+                    lastShownItemIndex: newLayout.lastShownItemIndex
+                  };
+                } else {
+                  (0, _debug.warn)('Unexpected (non-matching) "firstShownItemIndex" or "lastShownItemIndex" encountered in "didUpdateState()" after prepending items');
+                  (0, _debug.warn)('Previously calculated layout', this.previouslyCalculatedLayout);
+                  (0, _debug.warn)('New layout', newLayout);
+                  this.previouslyCalculatedLayout = undefined;
+                }
+              }
 
-      var reason = _ref6.reason;
+              return 'SEAMLESS_PREPEND';
+            } else {
+              (0, _debug.warn)("Unexpected \"firstShownItemIndex\" ".concat(newLayout.firstShownItemIndex, " encountered in \"didUpdateState()\" after prepending items. Expected 0."));
+            }
+          }
+        }
+      } // Reset `this.previouslyCalculatedLayout` in any case other than
+      // SEAMLESS_PREPEND or SEAMLESS_APPEND.
+
+
+      this.previouslyCalculatedLayout = undefined;
+    }
+  }, {
+    key: "updateStateRightAfterRender",
+    value: function updateStateRightAfterRender(_ref8) {
+      var reason = _ref8.reason,
+          stateUpdate = _ref8.stateUpdate;
 
       // In React, `setTimeout()` is used to prevent a React error:
       // "Maximum update depth exceeded.
@@ -824,63 +1290,79 @@ function () {
       //  React limits the number of nested updates to prevent infinite loops."
       if (this._useTimeoutInRenderLoop) {
         // Cancel a previously scheduled re-layout.
-        if (this.layoutTimer) {
-          (0, _requestAnimationFrameTimeout.clearTimeout)(this.layoutTimer);
-        } // Schedule a new re-layout.
-
-
-        this.layoutTimer = (0, _requestAnimationFrameTimeout.setTimeout)(function () {
-          _this2.layoutTimer = undefined;
+        stateUpdate = this.cancelLayoutTimer({
+          stateUpdate: stateUpdate
+        }); // Schedule a new re-layout.
 
-          _this2.onUpdateShownItemIndexes({
-            reason: reason
-          });
-        }, 0);
+        this.scheduleLayoutTimer({
+          reason: reason,
+          stateUpdate: stateUpdate
+        });
       } else {
         this.onUpdateShownItemIndexes({
-          reason: reason
+          reason: reason,
+          stateUpdate: stateUpdate
         });
       }
     }
   }, {
     key: "measureVerticalSpacing",
     value: function measureVerticalSpacing() {
-      if (this.getState().verticalSpacing === undefined) {
+      if (this.verticalSpacing === undefined) {
+        var _this$getState3 = this.getState(),
+            firstShownItemIndex = _this$getState3.firstShownItemIndex,
+            lastShownItemIndex = _this$getState3.lastShownItemIndex;
+
         (0, _debug["default"])('~ Measure item vertical spacing ~');
         var verticalSpacing = (0, _getVerticalSpacing["default"])({
-          container: this.getContainerElement(),
-          screen: this.screen
+          itemsContainer: this.itemsContainer,
+          renderedItemsCount: lastShownItemIndex - firstShownItemIndex + 1
         });
 
         if (verticalSpacing === undefined) {
           (0, _debug["default"])('Not enough items rendered to measure vertical spacing');
         } else {
           (0, _debug["default"])('Item vertical spacing', verticalSpacing);
-          this.setState({
-            verticalSpacing: verticalSpacing
-          });
+          this.verticalSpacing = verticalSpacing;
+
+          if (verticalSpacing !== 0) {
+            return verticalSpacing;
+          }
         }
       }
     }
   }, {
     key: "remeasureItemHeight",
     value: function remeasureItemHeight(i) {
-      var _this$getState2 = this.getState(),
-          firstShownItemIndex = _this$getState2.firstShownItemIndex;
+      var _this$getState4 = this.getState(),
+          firstShownItemIndex = _this$getState4.firstShownItemIndex;
 
       return this.itemHeights.remeasureItemHeight(i, firstShownItemIndex);
     }
   }, {
     key: "onItemStateChange",
-    value: function onItemStateChange(i, itemState) {
+    value: function onItemStateChange(i, newItemState) {
       if ((0, _debug.isDebug)()) {
         (0, _debug["default"])('~ Item state changed ~');
-        (0, _debug["default"])('Item', i);
+        (0, _debug["default"])('Item', 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
+        // get modified in between they've been output to the console and the developer
+        // decided to inspect them.
+
         (0, _debug["default"])('Previous state' + '\n' + JSON.stringify(this.getState().itemStates[i], null, 2));
-        (0, _debug["default"])('New state' + '\n' + JSON.stringify(itemState, null, 2));
+        (0, _debug["default"])('New state' + '\n' + JSON.stringify(newItemState, null, 2));
       }
 
-      this.getState().itemStates[i] = itemState;
+      this.getState().itemStates[i] = newItemState; // Schedule the item state update for after the new items have been rendered.
+
+      if (this.newItemsWillBeRendered) {
+        if (!this.itemStatesThatChangedWhileNewItemsWereBeingRendered) {
+          this.itemStatesThatChangedWhileNewItemsWereBeingRendered = {};
+        }
+
+        this.itemStatesThatChangedWhileNewItemsWereBeingRendered[String(i)] = newItemState;
+      }
     }
   }, {
     key: "onItemHeightChange",
@@ -888,18 +1370,13 @@ function () {
       (0, _debug["default"])('~ Re-measure item height ~');
       (0, _debug["default"])('Item', i);
 
-      var _this$getState3 = this.getState(),
-          itemHeights = _this$getState3.itemHeights;
-
-      var previousHeight = itemHeights[i];
-
-      if (previousHeight === undefined) {
-        return (0, _debug.reportError)("\"onItemHeightChange()\" has been called for item ".concat(i, ", but that item hasn't been rendered before."));
-      }
+      var _this$getState5 = this.getState(),
+          itemHeights = _this$getState5.itemHeights,
+          firstShownItemIndex = _this$getState5.firstShownItemIndex,
+          lastShownItemIndex = _this$getState5.lastShownItemIndex; // Check if the item is still rendered.
 
-      var newHeight = this.remeasureItemHeight(i); // Check if the item is still rendered.
 
-      if (newHeight === undefined) {
+      if (!(i >= firstShownItemIndex && i <= lastShownItemIndex)) {
         // There could be valid cases when an item is no longer rendered
         // by the time `.onItemHeightChange(i)` gets called.
         // For example, suppose there's a list of several items on a page,
@@ -928,15 +1405,61 @@ function () {
         return (0, _debug.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.');
       }
 
+      var previousHeight = itemHeights[i];
+
+      if (previousHeight === undefined) {
+        return (0, _debug.reportError)("\"onItemHeightChange()\" has been called for item ".concat(i, ", but that item hasn't been rendered before."));
+      }
+
+      var newHeight = this.remeasureItemHeight(i);
       (0, _debug["default"])('Previous height', previousHeight);
       (0, _debug["default"])('New height', newHeight);
 
       if (previousHeight !== newHeight) {
-        (0, _debug["default"])('~ Item height has changed ~'); // log('Item', i)
+        (0, _debug["default"])('~ Item height has changed ~'); // Update or reset previously calculated layout.
+
+        this.updatePreviouslyCalculatedLayoutOnItemHeightChange(i, previousHeight, newHeight); // Recalculate layout.
 
         this.onUpdateShownItemIndexes({
           reason: _Layout.LAYOUT_REASON.ITEM_HEIGHT_CHANGED
-        });
+        }); // Schedule the item height update for after the new items have been rendered.
+
+        if (this.newItemsWillBeRendered) {
+          if (!this.itemHeightsThatChangedWhileNewItemsWereBeingRendered) {
+            this.itemHeightsThatChangedWhileNewItemsWereBeingRendered = {};
+          }
+
+          this.itemHeightsThatChangedWhileNewItemsWereBeingRendered[String(i)] = newHeight;
+        }
+      }
+    } // Updates the snapshot of the current layout when an item's height changes.
+    //
+    // The "previously calculated layout" feature is not currently used.
+    //
+    // The current layout snapshot could be stored as a "previously calculated layout" variable
+    // so that it could theoretically be used when calculating new layout incrementally
+    // rather than from scratch, which would be an optimization.
+    //
+
+  }, {
+    key: "updatePreviouslyCalculatedLayoutOnItemHeightChange",
+    value: function updatePreviouslyCalculatedLayoutOnItemHeightChange(i, previousHeight, newHeight) {
+      if (this.previouslyCalculatedLayout) {
+        var 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;
+          }
+        } else {
+          // Patch `this.previouslyCalculatedLayout`'s shown items height.
+          this.previouslyCalculatedLayout.shownItemsHeight += newHeight - previousHeight;
+        }
       }
     }
     /**
@@ -992,8 +1515,14 @@ function () {
           var actualItemHeight = this.remeasureItemHeight(i);
 
           if (actualItemHeight !== previouslyMeasuredItemHeight) {
+            if (isValid) {
+              (0, _debug["default"])('~ Validate will-be-hidden item heights. ~'); // Update or reset previously calculated layout.
+
+              this.updatePreviouslyCalculatedLayoutOnItemHeightChange(i, previouslyMeasuredItemHeight, actualItemHeight);
+            }
+
             isValid = false;
-            (0, _debug.warn)('Item', i, 'will be unmounted at next render. Its height has changed from', previouslyMeasuredItemHeight, 'to', actualItemHeight, 'since it was last measured. This is not necessarily a bug, and could happen, for example, 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.');
+            (0, _debug.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.');
           }
         }
 
@@ -1002,23 +1531,65 @@ function () {
 
       return isValid;
     }
+  }, {
+    key: "getShownItemIndexes",
+    value: function getShownItemIndexes() {
+      var itemsCount = this.getItemsCount();
+
+      var _this$getVisibleArea = this.getVisibleArea(),
+          visibleAreaTop = _this$getVisibleArea.top,
+          visibleAreaBottom = _this$getVisibleArea.bottom;
+
+      if (this.bypass) {
+        return {
+          firstShownItemIndex: 0,
+          lastShownItemIndex: itemsCount - 1 // shownItemsHeight: this.getState().itemHeights.reduce((sum, itemHeight) => sum + itemHeight, 0)
+
+        };
+      } // Find the indexes of the items that are currently visible
+      // (or close to being visible) in the scrollable container.
+      // For scrollable containers other than the main screen, it could also
+      // check the visibility of such scrollable container itself, because it
+      // might be not visible.
+      // If such kind of an optimization would hypothetically be implemented,
+      // then it would also require listening for "scroll" events on the screen.
+      // Overall, I suppose that such "actual visibility" feature would be
+      // a very minor optimization and not something I'd deal with.
+
+
+      var isVisible = visibleAreaTop < this.itemsContainer.getHeight() && visibleAreaBottom > 0;
+
+      if (!isVisible) {
+        (0, _debug["default"])('The entire list is off-screen. No items are visible.');
+        return this.layout.getNonVisibleListShownItemIndexes();
+      } // Get shown item indexes.
+
+
+      return this.layout.getShownItemIndexes({
+        itemsCount: this.getItemsCount(),
+        visibleAreaTop: visibleAreaTop,
+        visibleAreaBottom: visibleAreaBottom
+      });
+    }
     /**
      * Updates the "from" and "to" shown item indexes.
      * If the list is visible and some of the items being shown are new
      * and are required to be measured first, then
-     * `redoLayoutAfterMeasuringItemHeights` is `true`.
+     * `firstNonMeasuredItemIndex` is defined.
      * If the list is visible and all items being shown have been encountered
-     * (and measured) before, then `redoLayoutAfterMeasuringItemHeights` is `false`.
+     * (and measured) before, then `firstNonMeasuredItemIndex` is `undefined`.
+     *
+     * The `stateUpdate` parameter is just an optional "additional" state update.
      */
 
   }, {
     key: "updateItems",
-
+    value:
     /**
      * @deprecated
      * `.updateItems()` has been renamed to `.setItems()`.
      */
-    value: function updateItems(newItems, options) {
+    function updateItems(newItems, options) {
       return this.setItems(newItems, options);
     }
     /**
@@ -1033,32 +1604,55 @@ function () {
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
       // * @param  {object} [newCustomState] — If `customState` was passed to `getInitialState()`, this `newCustomState` updates it.
-      var _this$getState4 = this.getState(),
-          previousItems = _this$getState4.items;
+      var _this$getState6 = this.getState(),
+          previousItems = _this$getState6.items; // Even if `newItems` are equal to `this.state.items`,
+      // still perform a `setState()` call, because, if `setState()` calls
+      // were "asynchronous", there could be a situation when a developer
+      // first calls `setItems(newItems)` and then `setItems(oldItems)`:
+      // if this function did `return` `if (newItems === this.state.items)`
+      // then `setState({ items: newItems })` would be scheduled as part of
+      // `setItems(newItems)` call, but the subsequent `setItems(oldItems)` call
+      // wouldn't do anything resulting in `newItems` being set as a result,
+      // and that wouldn't be what the developer intended.
 
-      var _this$getState5 = this.getState(),
-          itemStates = _this$getState5.itemStates,
-          itemHeights = _this$getState5.itemHeights;
+
+      var _this$getState7 = this.getState(),
+          itemStates = _this$getState7.itemStates;
+
+      var _ref9 = this.resetLayoutAfterResize ? this.resetLayoutAfterResize.stateUpdate : this.getState(),
+          itemHeights = _ref9.itemHeights;
 
       (0, _debug["default"])('~ Update items ~');
-      var layout;
-      var itemsDiff = this.getItemsDiff(previousItems, newItems); // If it's an "incremental" update.
+      var layoutUpdate;
+      var itemsUpdateInfo; // Compare the new items to the current items.
 
-      if (itemsDiff && !this.layoutResetPending) {
-        var _this$getState6 = this.getState(),
-            firstShownItemIndex = _this$getState6.firstShownItemIndex,
-            lastShownItemIndex = _this$getState6.lastShownItemIndex,
-            beforeItemsHeight = _this$getState6.beforeItemsHeight,
-            afterItemsHeight = _this$getState6.afterItemsHeight;
+      var itemsDiff = this.getItemsDiff(previousItems, newItems); // See if it's an "incremental" items update.
 
-        layout = {
+      if (itemsDiff) {
+        var _ref10 = this.resetLayoutAfterResize ? this.resetLayoutAfterResize.stateUpdate : this.getState(),
+            firstShownItemIndex = _ref10.firstShownItemIndex,
+            lastShownItemIndex = _ref10.lastShownItemIndex,
+            beforeItemsHeight = _ref10.beforeItemsHeight,
+            afterItemsHeight = _ref10.afterItemsHeight;
+
+        var shouldRestoreScrollPosition = firstShownItemIndex === 0 && ( // `preserveScrollPosition` option name is deprecated,
+        // use `preserveScrollPositionOnPrependItems` instead.
+        options.preserveScrollPositionOnPrependItems || options.preserveScrollPosition);
+        var prependedItemsCount = itemsDiff.prependedItemsCount,
+            appendedItemsCount = itemsDiff.appendedItemsCount;
+        layoutUpdate = this.layout.getLayoutUpdateForItemsDiff({
           firstShownItemIndex: firstShownItemIndex,
           lastShownItemIndex: lastShownItemIndex,
           beforeItemsHeight: beforeItemsHeight,
           afterItemsHeight: afterItemsHeight
-        };
-        var prependedItemsCount = itemsDiff.prependedItemsCount,
-            appendedItemsCount = itemsDiff.appendedItemsCount;
+        }, {
+          prependedItemsCount: prependedItemsCount,
+          appendedItemsCount: appendedItemsCount
+        }, {
+          itemsCount: newItems.length,
+          columnsCount: this.getActualColumnsCount(),
+          shouldRestoreScrollPosition: shouldRestoreScrollPosition
+        });
 
         if (prependedItemsCount > 0) {
           (0, _debug["default"])('Prepend', prependedItemsCount, 'items');
@@ -1066,6 +1660,34 @@ function () {
 
           if (itemStates) {
             itemStates = new Array(prependedItemsCount).concat(itemStates);
+          } // Restore scroll position after prepending items (if requested).
+
+
+          if (shouldRestoreScrollPosition) {
+            (0, _debug["default"])('Will restore scroll position');
+            this.listHeightChangeWatcher.snapshot({
+              previousItems: previousItems,
+              newItems: newItems,
+              prependedItemsCount: prependedItemsCount
+            }); // "Seamless prepend" scenario doesn't result in a re-layout,
+            // so if any "non measured item" is currently pending,
+            // it doesn't get reset and will be handled after `state` is updated.
+
+            if (this.firstNonMeasuredItemIndex !== undefined) {
+              this.firstNonMeasuredItemIndex += prependedItemsCount;
+            }
+          } else {
+            (0, _debug["default"])('Reset layout'); // Reset layout because none of the prepended items have been measured.
+
+            layoutUpdate = this.layout.getInitialLayoutValues({
+              itemsCount: newItems.length,
+              columnsCount: this.getActualColumnsCount()
+            }); // Unschedule a potentially scheduled layout update
+            // after measuring a previously non-measured item
+            // because the list will be re-layout anyway
+            // due to the new items being set.
+
+            this.firstNonMeasuredItemIndex = undefined;
           }
         }
 
@@ -1078,55 +1700,311 @@ function () {
           }
         }
 
-        this.layout.updateLayoutForItemsDiff(layout, itemsDiff, {
-          itemsCount: newItems.length
-        });
-
-        if (prependedItemsCount > 0) {
-          // `preserveScrollPosition` option name is deprecated,
-          // use `preserveScrollPositionOnPrependItems` instead.
-          if (options.preserveScrollPositionOnPrependItems || options.preserveScrollPosition) {
-            if (this.getState().firstShownItemIndex === 0) {
-              this.restoreScroll.captureScroll({
-                previousItems: previousItems,
-                newItems: newItems,
-                prependedItemsCount: prependedItemsCount
-              });
-              this.layout.showItemsFromTheStart(layout);
-            }
-          }
-        }
+        itemsUpdateInfo = {
+          prepend: prependedItemsCount > 0,
+          append: appendedItemsCount > 0
+        };
       } else {
         (0, _debug["default"])('Items have changed, and', itemsDiff ? 'a re-layout from scratch has been requested.' : 'it\'s not a simple append and/or prepend.', 'Rerender the entire list from scratch.');
         (0, _debug["default"])('Previous items', previousItems);
-        (0, _debug["default"])('New items', newItems);
+        (0, _debug["default"])('New items', newItems); // Reset item heights and item states.
+
         itemHeights = new Array(newItems.length);
         itemStates = new Array(newItems.length);
-        layout = this.getInitialLayoutValues({
-          itemsCount: newItems.length
-        });
+        layoutUpdate = this.layout.getInitialLayoutValues({
+          itemsCount: newItems.length,
+          columnsCount: this.getActualColumnsCount()
+        }); // Unschedule a potentially scheduled layout update
+        // after measuring a previously non-measured item
+        // because the list will be re-layout from scratch
+        // due to the new items being set.
+
+        this.firstNonMeasuredItemIndex = undefined; // Also reset any potential pending scroll position restoration.
+        // For example, imagine a developer first called `.setItems(incrementalItemsUpdate)`
+        // and then called `.setItems(differentItems)` and there was no state update
+        // in between those two calls. This could happen because state updates aren't
+        // required to be "synchronous". On other words, calling `this.setState()`
+        // doesn't necessarily mean that the state is applied immediately.
+        // Imagine also that such "delayed" state updates could be batched,
+        // like they do in React inside event handlers (though that doesn't apply to this case):
+        // https://github.com/facebook/react/issues/10231#issuecomment-316644950
+        // If `this.listHeightChangeWatcher` wasn't reset on `.setItems(differentItems)`
+        // and if the second `this.setState()` call overwrites the first one
+        // then it would attempt to restore scroll position in a situation when
+        // it should no longer do that. Hence the reset here.
+
+        this.listHeightChangeWatcher.reset();
+        itemsUpdateInfo = {
+          replace: true
+        };
       }
 
-      (0, _debug["default"])('~ Update state ~');
-      (0, _debug["default"])('First shown item index', layout.firstShownItemIndex);
-      (0, _debug["default"])('Last shown item index', layout.lastShownItemIndex);
-      (0, _debug["default"])('Before items height', layout.beforeItemsHeight);
-      (0, _debug["default"])('After items height (actual or estimated)', layout.afterItemsHeight); // Optionally preload items to be rendered.
-
-      this.onBeforeShowItems(newItems, itemHeights, layout.firstShownItemIndex, layout.lastShownItemIndex); // `this.newItemsPending` will be cleared in `didUpdateState()`.
-
-      this.newItemsPending = newItems; // Update state.
-
-      this.setState(_objectSpread({}, layout, {
+      (0, _debug["default"])('~ Update state ~'); // const layoutValuesAfterUpdate = {
+      // 	...this.getState(),
+      // 	...layoutUpdate
+      // }
+      // `layoutUpdate` is equivalent to `layoutValuesAfterUpdate` because
+      // `layoutUpdate` contains all the relevant properties.
+
+      (0, _debug["default"])('First shown item index', layoutUpdate.firstShownItemIndex);
+      (0, _debug["default"])('Last shown item index', layoutUpdate.lastShownItemIndex);
+      (0, _debug["default"])('Before items height', layoutUpdate.beforeItemsHeight);
+      (0, _debug["default"])('After items height (actual or estimated)', layoutUpdate.afterItemsHeight); // Optionally preload items to be rendered.
+      //
+      // `layoutUpdate` is equivalent to `layoutValuesAfterUpdate` because
+      // `layoutUpdate` contains all the relevant properties.
+      //
+
+      this.onBeforeShowItems(newItems, itemHeights, layoutUpdate.firstShownItemIndex, layoutUpdate.lastShownItemIndex); // `this.newItemsWillBeRendered` signals that new `items` are being rendered,
+      // and that `VirtualScroller` should temporarily stop all other updates.
+      //
+      // `this.newItemsWillBeRendered` is cleared in `didUpdateState()`.
+      //
+      // The values in `this.newItemsWillBeRendered` are used, for example,
+      // in `.onResize()` handler in order to not break state consistency when
+      // state updates are "asynchronous" (delayed) and there's a window resize event
+      // in between calling `setState()` below and that call actually being applied.
+      //
+
+      this.newItemsWillBeRendered = _objectSpread(_objectSpread({}, itemsUpdateInfo), {}, {
+        count: newItems.length,
+        // `layoutUpdate` now contains all layout-related properties, even if those that
+        // didn't change. So `firstShownItemIndex` is always in `this.newItemsWillBeRendered`.
+        layout: layoutUpdate
+      }); // `layoutUpdate` now contains all layout-related properties, even if those that
+      // didn't change. So this part is no longer relevant.
+      //
+      // // If `firstShownItemIndex` is gonna be modified as a result of setting new items
+      // // then keep that "new" `firstShownItemIndex` in order for it to be used by
+      // // `onResize()` handler when it calculates "new" `firstShownItemIndex`
+      // // based on the new columns count (corresponding to the new window width).
+      // if (layoutUpdate.firstShownItemIndex !== undefined) {
+      // 	this.newItemsWillBeRendered = {
+      // 		...this.newItemsWillBeRendered,
+      // 		firstShownItemIndex: layoutUpdate.firstShownItemIndex
+      // 	}
+      // }
+      // Update `VirtualScroller` state.
+      //
+      // This state update should overwrite all the `state` properties
+      // that are also updated in the "on scroll" handler (`getShownItemIndexes()`):
+      //
+      // * `firstShownItemIndex`
+      // * `lastShownItemIndex`
+      // * `beforeItemsHeight`
+      // * `afterItemsHeight`
+      //
+      // That's because this `setState()` update has a higher priority
+      // than that of the "on scroll" handler, so it should overwrite
+      // any potential state changes dispatched by the "on scroll" handler.
+      //
+
+      var newState = _objectSpread(_objectSpread({}, layoutUpdate), {}, {
         items: newItems,
         itemStates: itemStates,
         itemHeights: itemHeights
-      }));
+      }); // Introduced `shouldIncludeBeforeResizeValuesInState()` getter just to prevent
+      // cluttering `state` with `beforeResize: undefined` property if `beforeResize`
+      // hasn't ever been set in `state` previously.
+
+
+      if (this.beforeResize.shouldIncludeBeforeResizeValuesInState()) {
+        if (this.shouldDiscardBeforeResizeItemHeights()) {
+          // Reset "before resize" item heights because now there're new items prepended
+          // with unknown heights, or completely new items with unknown heights, so
+          // `beforeItemsHeight` value won't be preserved anyway.
+          newState.beforeResize = undefined;
+        } else {
+          // Overwrite `beforeResize` property in `state` even if it wasn't modified
+          // because state updates could be "asynchronous" and in that case there could be
+          // some previous `setState()` call from some previous `setItems()` call that
+          // hasn't yet been applied, and that previous call might have scheduled setting
+          // `state.beforeResize` property to `undefined` in order to reset it, but this
+          // next `setState()` call might not require resetting `state.beforeResize` property
+          // so it should undo resetting it by simply overwriting it with its normal value.
+          newState.beforeResize = this.resetLayoutAfterResize ? this.resetLayoutAfterResize.stateUpdate.beforeResize : this.getState().beforeResize;
+        }
+      } // `newState` should also overwrite all `state` properties that're updated in `onResize()`
+      // because `setItems()`'s state updates always overwrite `onResize()`'s state updates.
+      // (The least-priority ones are `onScroll()` state updates, but those're simply skipped
+      // if there's a pending `setItems()` or `onResize()` update).
+      //
+      // `state` property exceptions:
+      //
+      // `verticalSpacing` property is not updated here because it's fine setting it to
+      // `undefined` in `onResize()` — it will simply be re-measured after the component re-renders.
+      //
+      // `columnsCount` property is also not updated here because by definition it's only
+      // updated in `onResize()`.
+      // Render.
+
+
+      this.setState(newState);
     }
   }, {
     key: "getItemsDiff",
     value: function getItemsDiff(previousItems, newItems) {
       return (0, _getItemsDiff2["default"])(previousItems, newItems, this.isItemEqual);
+    } // Returns whether "before resize" item heights should be discarded
+    // as a result of calling `setItems()` with a new set of items
+    // when an asynchronous `setState()` call inside that function
+    // hasn't been applied yet.
+    //
+    // If `setItems()` update was an "incremental" one and no items
+    // have been prepended, then `firstShownItemIndex` is preserved,
+    // and all items' heights before it should be kept in order to
+    // preserve the top offset of the first shown item so that there's
+    // no "content jumping".
+    //
+    // If `setItems()` update was an "incremental" one but there're
+    // some prepended items, then it means that now there're new items
+    // with unknown heights at the top, so the top offset of the first
+    // shown item won't be preserved because there're no "before resize"
+    // heights of those items.
+    //
+    // If `setItems()` update was not an "incremental" one, then don't
+    // attempt to restore previous item heights after a potential window
+    // width change because all item heights have been reset.
+    //
+
+  }, {
+    key: "shouldDiscardBeforeResizeItemHeights",
+    value: function shouldDiscardBeforeResizeItemHeights() {
+      if (this.newItemsWillBeRendered) {
+        var _this$newItemsWillBeR = this.newItemsWillBeRendered,
+            prepend = _this$newItemsWillBeR.prepend,
+            replace = _this$newItemsWillBeR.replace;
+        return prepend || replace;
+      }
+    }
+  }, {
+    key: "onResize",
+    value: function onResize() {
+      // Reset "previously calculated layout".
+      //
+      // The "previously calculated layout" feature is not currently used.
+      //
+      // The current layout snapshot could be stored as a "previously calculated layout" variable
+      // so that it could theoretically be used when calculating new layout incrementally
+      // rather than from scratch, which would be an optimization.
+      //
+      this.previouslyCalculatedLayout = undefined; // Cancel any potential scheduled scroll position restoration.
+
+      this.listHeightChangeWatcher.reset(); // Get the most recent items count.
+      // If there're a "pending" `setItems()` call then use the items count from that call
+      // instead of using the count of currently shown `items` from `state`.
+      // A `setItems()` call is "pending" when `setState()` operation is "asynchronous", that is
+      // when `setState()` calls aren't applied immediately, like in React.
+
+      var itemsCount = this.newItemsWillBeRendered ? this.newItemsWillBeRendered.count : this.getState().itemHeights.length; // If layout values have been calculated as a result of a "pending" `setItems()` call,
+      // then don't discard those new layout values and use them instead of the ones from `state`.
+      //
+      // A `setItems()` call is "pending" when `setState()` operation is "asynchronous", that is
+      // when `setState()` calls aren't applied immediately, like in React.
+      //
+
+      var layout = this.newItemsWillBeRendered ? this.newItemsWillBeRendered.layout : this.getState(); // Update `VirtualScroller` state.
+
+      var newState = {
+        // This state update should also overwrite all the `state` properties
+        // that are also updated in the "on scroll" handler (`getShownItemIndexes()`):
+        //
+        // * `firstShownItemIndex`
+        // * `lastShownItemIndex`
+        // * `beforeItemsHeight`
+        // * `afterItemsHeight`
+        //
+        // That's because this `setState()` update has a higher priority
+        // than that of the "on scroll" handler, so it should overwrite
+        // any potential state changes dispatched by the "on scroll" handler.
+        //
+        // All these properties might have changed, but they're not
+        // recalculated here becase they'll be recalculated after
+        // this new state is applied (rendered).
+        //
+        firstShownItemIndex: layout.firstShownItemIndex,
+        lastShownItemIndex: layout.lastShownItemIndex,
+        beforeItemsHeight: layout.beforeItemsHeight,
+        afterItemsHeight: layout.afterItemsHeight,
+        // Reset item heights, because if scrollable container's width (or height)
+        // has changed, then the list width (or height) most likely also has changed,
+        // and also some CSS `@media()` rules might have been added or removed.
+        // So re-render the list entirely.
+        itemHeights: new Array(itemsCount),
+        columnsCount: this.getActualColumnsCountForState(),
+        // Re-measure vertical spacing after render because new CSS styles
+        // might be applied for the new window width.
+        verticalSpacing: undefined
+      };
+      var firstShownItemIndex = layout.firstShownItemIndex,
+          lastShownItemIndex = layout.lastShownItemIndex; // Get the `columnsCount` for the new window width.
+
+      var newColumnsCount = this.getActualColumnsCount(); // Re-calculate `firstShownItemIndex` and `lastShownItemIndex`
+      // based on the new `columnsCount` so that the whole row is visible.
+
+      var newFirstShownItemIndex = Math.floor(firstShownItemIndex / newColumnsCount) * newColumnsCount;
+      var newLastShownItemIndex = Math.ceil((lastShownItemIndex + 1) / newColumnsCount) * newColumnsCount - 1; // Potentially update `firstShownItemIndex` if it needs to be adjusted in order to
+      // correspond to the new `columnsCount`.
+
+      if (newFirstShownItemIndex !== firstShownItemIndex) {
+        (0, _debug["default"])('Columns Count changed from', this.getState().columnsCount || 1, 'to', newColumnsCount);
+        (0, _debug["default"])('First Shown Item Index needs to change from', firstShownItemIndex, 'to', newFirstShownItemIndex);
+      } // Always rewrite `firstShownItemIndex` and `lastShownItemIndex`
+      // as part of the `state` update, even if it hasn't been modified.
+      //
+      // The reason is that there could be two subsequent `onResize()` calls:
+      // the first one could be user resizing the window to half of its width,
+      // resulting in an "asynchronous" `setState()` call, and then, before that
+      // `setState()` call is applied, a second resize event happens when the user
+      // has resized the window back to its original width, meaning that the
+      // `columnsCount` is back to its original value.
+      // In that case, the final `newFirstShownItemIndex` will be equal to the
+      // original `firstShownItemIndex` that was in `state` before the user
+      // has started resizing the window, so, in the end, `state.firstShownItemIndex`
+      // property wouldn't have changed, but it still has to be part of the final
+      // state update in order to overwrite the previous update of `firstShownItemIndex`
+      // property that has been scheduled to be applied in state after the first resize
+      // happened.
+      //
+
+
+      newState.firstShownItemIndex = newFirstShownItemIndex;
+      newState.lastShownItemIndex = newLastShownItemIndex;
+      var verticalSpacing = this.getVerticalSpacing();
+      var columnsCount = this.getColumnsCount(); // `beforeResize` is always overwritten in `state` here.
+      // (once it has started being tracked in `state`)
+
+      if (this.shouldDiscardBeforeResizeItemHeights() || newFirstShownItemIndex === 0) {
+        if (this.beforeResize.shouldIncludeBeforeResizeValuesInState()) {
+          newState.beforeResize = undefined;
+        }
+      } // Snapshot "before resize" values in order to preserve the currently
+      // shown items' vertical position on screen so that there's no "content jumping".
+      else {
+        // Keep "before resize" values in order to preserve the currently
+        // shown items' vertical position on screen so that there's no
+        // "content jumping". These "before resize" values will be discarded
+        // when (if) the user scrolls back to the top of the list.
+        newState.beforeResize = {
+          verticalSpacing: verticalSpacing,
+          columnsCount: columnsCount,
+          itemHeights: this.beforeResize.snapshotBeforeResizeItemHeights({
+            firstShownItemIndex: firstShownItemIndex,
+            newFirstShownItemIndex: newFirstShownItemIndex,
+            newColumnsCount: newColumnsCount
+          })
+        };
+      } // `this.resetLayoutAfterResize` tells `VirtualScroller` that it should
+      // temporarily stop other updates (like "on scroll" updates) and wait
+      // for the new `state` to be applied, after which the `didUpdateState()`
+      // function will clear this flag and perform a re-layout.
+
+
+      this.resetLayoutAfterResize = {
+        stateUpdate: newState
+      }; // Rerender.
+
+      this.setState(newState);
     }
   }]);
 
@@ -1134,4 +2012,5 @@ function () {
 }();
 
 exports["default"] = VirtualScroller;
+var SLOW_LAYOUT_DURATION = 15; // in milliseconds.
 //# sourceMappingURL=VirtualScroller.js.map