virtual-scroller 1.8.1 → 1.9.0

package/modules/VirtualScroller.js

@@ -1,33 +1,19 @@
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
 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; }
 
-// For some weird reason, in Chrome, `setTimeout()` would lag up to a second (or more) behind.
-// Turns out, Chrome developers have deprecated `setTimeout()` API entirely without asking anyone.
-// Replacing `setTimeout()` with `requestAnimationFrame()` can work around that Chrome bug.
-// https://github.com/bvaughn/react-virtualized/issues/722
-import { setTimeout, clearTimeout } from 'request-animation-frame-timeout';
-import { supportsTbody, BROWSER_NOT_SUPPORTED_ERROR, addTbodyStyles, setTbodyPadding } from './DOM/tbody';
-import DOMEngine from './DOM/Engine';
-import Layout, { LAYOUT_REASON } from './Layout';
-import Resize from './Resize';
-import BeforeResize from './BeforeResize';
-import Scroll from './Scroll';
-import ListHeightChangeWatcher from './ListHeightChangeWatcher';
-import ItemHeights from './ItemHeights';
-import _getItemsDiff from './getItemsDiff';
-import getVerticalSpacing from './getVerticalSpacing';
-import log, { warn, isDebug, reportError } from './utility/debug';
-import shallowEqual from './utility/shallowEqual';
-import getStateSnapshot from './utility/getStateSnapshot';
+import VirtualScrollerConstructor from './VirtualScroller.constructor.js';
+import { hasTbodyStyles, addTbodyStyles } from './DOM/tbody.js';
+import { LAYOUT_REASON } from './Layout.js';
+import log from './utility/debug.js';
 
 var VirtualScroller = /*#__PURE__*/function () {
   /**
@@ -43,989 +29,155 @@ var VirtualScroller = /*#__PURE__*/function () {
 
     _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.getItemsContainerTopOffset();
-
-      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();
+      if (!_this._isActive) {
+        throw new Error('[virtual-scroller] Can\'t stop a `VirtualScroller` that hasn\'t been started');
       }
 
-      _this.cancelLayoutTimer({});
-    });
-
-    _defineProperty(this, "willUpdateState", function (newState, prevState) {
-      // Ignore setting initial state.
-      if (!prevState) {
-        return;
-      } // This function isn't currently used.
-      // Was previously used to capture scroll position in order to
-      // restore it later after the new state is rendered.
-
-    });
-
-    _defineProperty(this, "didUpdateState", function (prevState) {
-      var newState = _this.getState();
-
-      if (_this.onStateChange) {
-        if (!shallowEqual(newState, prevState)) {
-          _this.onStateChange(newState, prevState);
-        }
-      } // Ignore setting initial state.
-
-
-      if (!prevState) {
-        return;
-      }
-
-      if (!_this.isRendered) {
-        return;
-      }
-
-      log('~ Rendered ~');
-
-      if (isDebug()) {
-        log('State', getStateSnapshot(newState));
-      }
-
-      var layoutUpdateReason;
-
-      if (_this.firstNonMeasuredItemIndex !== undefined) {
-        layoutUpdateReason = LAYOUT_REASON.ACTUAL_ITEM_HEIGHTS_HAVE_BEEN_MEASURED;
-      }
-
-      if (_this.resetLayoutAfterResize) {
-        layoutUpdateReason = 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.
-      //
-
-
-      var resetLayoutAfterResize = _this.resetLayoutAfterResize; // Reset `this.firstNonMeasuredItemIndex`.
-
-      _this.firstNonMeasuredItemIndex = undefined; // Reset `this.resetLayoutAfterResize` flag.
-
-      _this.resetLayoutAfterResize = undefined; // Reset `this.newItemsWillBeRendered` flag.
-
-      _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(); // `newState.itemHeights` is an array of `undefined`s.
-
-
-          _this.itemHeights.initialize(newState.itemHeights);
-        }
-
-        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_REASON.ITEMS_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 || resetLayoutAfterResize) {
-        var verticalSpacingStateUpdate = _this.measureItemHeightsAndSpacingAndUpdateTablePadding();
-
-        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)
-
-
-      var cleanedUpBeforeResize = _this.beforeResize.cleanUpBeforeResizeItemHeights(prevState);
-
-      if (cleanedUpBeforeResize !== undefined) {
-        var scrollBy = cleanedUpBeforeResize.scrollBy,
-            beforeResize = cleanedUpBeforeResize.beforeResize;
-        log('Correct scroll position by', scrollBy);
-
-        _this.scroll.scrollByY(scrollBy);
-
-        stateUpdate = _objectSpread(_objectSpread({}, stateUpdate), {}, {
-          beforeResize: beforeResize
-        });
-      }
-
-      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.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 `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
-        // to show all of the prepended items at once, there's no need to
-        // "redo layout after render". Additionally, if layout was re-done
-        // after render, then there would be a short interval of visual
-        // "jitter" due to the scroll position not being restored because it'd
-        // wait for the second layout to finish instead of being restored
-        // right after the first one.
-
-
-        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
-      // in the actual height of the list item being different
-      // from what has been initially measured in `this.itemHeights[i]`,
-      // if the developer didn't call `.onItemStateChange()` and `.onItemHeightChange(i)`.
-
-
-      if (!_this.validateWillBeHiddenItemHeightsAreAccurate(firstShownItemIndex, lastShownItemIndex)) {
-        log('~ Because some of the will-be-hidden item heights (listed above) have changed since they\'ve last been measured, redo layout. ~'); // Redo layout, now with the correct item heights.
-
-        return _this.updateShownItemIndexes({
-          stateUpdate: stateUpdate
-        });
-      } // Measure "before" items height.
-
-
-      var beforeItemsHeight = _this.layout.getBeforeItemsHeight(firstShownItemIndex); // Measure "after" items height.
-
-
-      var afterItemsHeight = _this.layout.getAfterItemsHeight(lastShownItemIndex, _this.getItemsCount());
-
-      var layoutDuration = Date.now() - startedAt; // Debugging.
-
-      log('~ Layout values ' + (_this.bypass ? '(bypass) ' : '') + '~');
-
-      if (layoutDuration < SLOW_LAYOUT_DURATION) {// log('Calculated in', layoutDuration, 'ms')
-      } else {
-        warn('Layout calculated in', layoutDuration, 'ms');
-      }
-
-      if (_this._getColumnsCount) {
-        log('Columns count', _this.getColumnsCount());
-      }
-
-      log('First shown item index', firstShownItemIndex);
-      log('Last shown item index', lastShownItemIndex);
-      log('Before items height', beforeItemsHeight);
-      log('After items height (actual or estimated)', afterItemsHeight);
-      log('Average item height (used for estimated after items height calculation)', _this.itemHeights.getAverage());
-
-      if (isDebug()) {
-        log('Item heights', _this.getState().itemHeights.slice());
-        log('Item states', _this.getState().itemStates.slice());
-      } // Optionally preload items to be rendered.
-
-
-      _this.onBeforeShowItems(_this.getState().items, _this.getState().itemHeights, firstShownItemIndex, lastShownItemIndex); // Set `this.firstNonMeasuredItemIndex`.
-
-
-      _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
-      }, stateUpdate));
-    });
-
-    _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 (_this.getItemsCount() === 0) {
-        return skip();
-      } // Cancel a "re-layout when user stops scrolling" timer.
+      _this._isActive = false;
+      log('~ Stop ~');
 
+      _this.resize.stop();
 
-      _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.
+      _this.scroll.stop(); // Stop `ListTopOffsetWatcher` if it has been started.
+      // There seems to be no need to restart `ListTopOffsetWatcher`.
+      // It's mainly a hacky workaround for development mode anyway.
 
 
-      stateUpdate = _this.cancelLayoutTimer({
-        stateUpdate: stateUpdate
-      }); // Perform a re-layout.
+      if (_this.listTopOffsetWatcher && _this.listTopOffsetWatcher.isStarted()) {
+        _this.listTopOffsetWatcher.stop();
+      } // Cancel any scheduled layout.
 
-      log("~ Update Layout (on ".concat(reason, ") ~"));
 
-      _this.updateShownItemIndexes({
-        stateUpdate: stateUpdate
-      });
+      _this.cancelLayoutTimer({});
     });
 
     _defineProperty(this, "updateLayout", function () {
-      return _this.onUpdateShownItemIndexes({
+      _this.hasToBeStarted();
+
+      _this.onUpdateShownItemIndexes({
         reason: LAYOUT_REASON.MANUAL
       });
     });
 
-    _defineProperty(this, "layout", function () {
-      return _this.updateLayout();
+    _defineProperty(this, "onRender", function () {
+      _this._onRender(_this.getState(), _this.previousState);
     });
 
-    var onStateChange = options.onStateChange,
-        customState = options.customState,
-        initialScrollPosition = options.initialScrollPosition,
-        onScrollPositionChange = options.onScrollPositionChange,
-        measureItemsBatchSize = options.measureItemsBatchSize,
-        getScrollableContainer = options.getScrollableContainer,
-        getColumnsCount = options.getColumnsCount,
-        getItemId = options.getItemId,
-        tbody = options.tbody,
-        _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,
-        engine = options.engine;
-    log('~ Initialize ~'); // If `state` is passed then use `items` from `state`
-    // instead of the `items` argument.
-
-    if (state) {
-      items = state.items;
-    } // `getScrollableContainer` option is deprecated.
-    // Use `scrollableContainer` instead.
-
-
-    if (!scrollableContainer && getScrollableContainer) {
-      scrollableContainer = getScrollableContainer();
-    } // Could support non-DOM rendering engines.
-    // For example, React Native, `<canvas/>`, etc.
-
-
-    if (!engine) {
-      engine = DOMEngine;
-    } // 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.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.
-    // 	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 (engine !== DOMEngine) {
-        throw new Error('[virtual-scroller] `tbody` option is only supported for DOM rendering engine');
-      }
-
-      log('~ <tbody/> detected ~');
-      this.tbody = true;
-
-      if (!supportsTbody()) {
-        log('~ <tbody/> not supported ~');
-        reportError(BROWSER_NOT_SUPPORTED_ERROR);
-        bypass = true;
-      }
-    }
-
-    if (bypass) {
-      log('~ "bypass" mode ~');
-    } // In `bypass` mode, `VirtualScroller` doesn't wait
-    // for the user to scroll down to render all items:
-    // instead, it renders all items right away, as if
-    // the list is rendered without using `VirtualScroller`.
-    // It was added just to measure how much is the
-    // performance difference between using a `VirtualScroller`
-    // and not using a `VirtualScroller`.
-    // It turned out that unmounting large React component trees
-    // is a very long process, so `VirtualScroller` does seem to
-    // make sense when used in a React application.
-
-
-    this.bypass = bypass; // this.bypassBatchSize = bypassBatchSize || 10
-    // Using `setTimeout()` in render loop is a workaround
-    // for avoiding a React error message:
-    // "Maximum update depth exceeded.
-    //  This can happen when a component repeatedly calls
-    //  `.setState()` inside `componentWillUpdate()` or `componentDidUpdate()`.
-    //  React limits the number of nested updates to prevent infinite loops."
+    VirtualScrollerConstructor.call(this, getItemsContainerElement, items, options);
+  }
+  /**
+   * Should be invoked after a "container" DOM Element is mounted (inserted into the DOM tree).
+   */
 
-    this._useTimeoutInRenderLoop = _useTimeoutInRenderLoop;
 
-    if (getItemId) {
-      this.isItemEqual = function (a, b) {
-        return getItemId(a) === getItemId(b);
-      };
-    } else {
-      this.isItemEqual = function (a, b) {
-        return a === b;
-      };
-    }
-
-    this.initialItems = items; // this.prerenderMargin = prerenderMargin
+  _createClass(VirtualScroller, [{
+    key: "start",
+    value: function start() {
+      if (this._isActive) {
+        throw new Error('[virtual-scroller] `VirtualScroller` has already been started');
+      } // If has been stopped previously.
 
-    this.onStateChange = onStateChange;
-    this._getColumnsCount = getColumnsCount;
 
-    if (onItemInitialRender) {
-      this.onItemInitialRender = onItemInitialRender;
-    } // `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
-    else if (onItemFirstRender) {
-      this.onItemInitialRender = function (item) {
-        warn('`onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.');
+      var isRestart = this._isActive === false;
 
-        var _this$getState = _this.getState(),
-            items = _this$getState.items;
+      if (!isRestart) {
+        // If no custom one has been configured, uses the default one.
+        // Also sets the initial state.
+        if (!this._usesCustomStateStorage) {
+          this.useDefaultStateStorage();
+        } // If `render()` function parameter was passed,
+        // perform an initial render.
 
-        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);
+        if (this._render) {
+          this._render(this.getState());
         }
-      };
-    }
-
-    log('Items count', items.length);
-
-    if (estimatedItemHeight) {
-      log('Estimated item height', estimatedItemHeight);
-    } // 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;
-      };
-
-      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);
-
-        willUpdateState(newState, prevState);
-        _this.state = newState; // // Is only used in tests.
-        // if (this._onStateUpdate) {
-        // 	this._onStateUpdate(stateUpdate)
-        // }
-
-        didUpdateState(prevState);
-      };
-    }
-
-    this.getState = getState;
-
-    this.setState = function (stateUpdate) {
-      if (isDebug()) {
-        log('Set state', getStateSnapshot(stateUpdate));
       }
 
-      setState(stateUpdate, {
-        willUpdateState: _this.willUpdateState,
-        didUpdateState: _this.didUpdateState
-      });
-    };
+      log('~ Start ~'); // `this._isActive = true` should be placed somewhere at the start of this function.
 
-    if (state) {
-      if (isDebug()) {
-        log('Initial state (passed)', getStateSnapshot(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._isActive = true; // Reset `ListHeightMeasurement` just in case it has some "leftover" state.
 
+      this.listHeightMeasurement.reset(); // Reset `_isResizing` flag just in case it has some "leftover" value.
 
-    if (state) {
-      var shouldResetLayout;
-      var columnsCountForState = this.getActualColumnsCountForState();
+      this._isResizing = undefined; // Reset `_isSettingNewItems` flag just in case it has some "leftover" value.
 
-      if (columnsCountForState !== state.columnsCount) {
-        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) {
-        warn('~ First Shown Item Index', state.firstShownItemIndex, 'is not divisible by Columns Count', columnsCount, '~');
-        shouldResetLayout = true;
-      }
-
-      if (shouldResetLayout) {
-        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.
-
-
-    this.itemHeights = new ItemHeights(this.itemsContainer, function (i) {
-      return _this.getState().itemHeights[i];
-    }, function (i, height) {
-      return _this.getState().itemHeights[i] = height;
-    }); // Initialize `ItemHeights` from the initially passed `state`.
-
-    if (state) {
-      this.itemHeights.initialize(state.itemHeights);
-    }
+      this._isSettingNewItems = undefined; // Work around `<tbody/>` not being able to have `padding`.
+      // https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1
 
-    this.layout = new Layout({
-      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.
+      if (this.tbody) {
+        if (!hasTbodyStyles(this.getItemsContainerElement())) {
+          addTbodyStyles(this.getItemsContainerElement());
+        }
+      } // If there was a pending state update that didn't get applied
+      // because of stopping the `VirtualScroller`, apply that state update now.
       //
-      // 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 pending state update won't get applied if the scrollable container width
+      // has changed but that's ok because that state update currently could only contain:
+      // * `scrollableContainerWidth`
+      // * `verticalSpacing`
+      // * `beforeResize`
+      // All of those get rewritten in `onResize()` anyway.
       //
-      getPreviouslyCalculatedLayout: function getPreviouslyCalculatedLayout() {
-        return _this.previouslyCalculatedLayout;
-      }
-    });
-    this.resize = new Resize({
-      bypass: bypass,
-      scrollableContainer: this.scrollableContainer,
-      onStart: function onStart() {
-        log('~ Scrollable container resize started ~');
-        _this.isResizing = true;
-      },
-      onStop: function onStop() {
-        log('~ 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_REASON.VIEWPORT_SIZE_UNCHANGED
-        });
-      },
-      onHeightChange: function onHeightChange() {
-        return _this.onUpdateShownItemIndexes({
-          reason: LAYOUT_REASON.VIEWPORT_HEIGHT_CHANGED
-        });
-      },
-      onWidthChange: function onWidthChange(prevWidth, newWidth) {
-        log('~ Scrollable container width changed from', prevWidth, 'to', newWidth, '~');
-
-        _this.onResize();
-      }
-    });
-    this.scroll = new Scroll({
-      bypass: this.bypass,
-      scrollableContainer: this.scrollableContainer,
-      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_REASON.STOPPED_SCROLLING : LAYOUT_REASON.SCROLL
-        });
-      },
-      initialScrollPosition: initialScrollPosition,
-      onScrollPositionChange: onScrollPositionChange,
-      isImmediateLayoutScheduled: function isImmediateLayoutScheduled() {
-        return _this.layoutTimer;
-      },
-      hasNonRenderedItemsAtTheTop: function hasNonRenderedItemsAtTheTop() {
-        return _this.getState().firstShownItemIndex > 0;
-      },
-      hasNonRenderedItemsAtTheBottom: function hasNonRenderedItemsAtTheBottom() {
-        return _this.getState().lastShownItemIndex < _this.getItemsCount() - 1;
-      },
-      getLatestLayoutVisibleArea: function getLatestLayoutVisibleArea() {
-        return _this.latestLayoutVisibleArea;
-      },
-      getListTopOffset: this.getListTopOffsetInsideScrollableContainer,
-      getPrerenderMargin: function getPrerenderMargin() {
-        return _this.getPrerenderMargin();
-      }
-    });
-    this.listHeightChangeWatcher = new ListHeightChangeWatcher({
-      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_REASON.TOP_OFFSET_CHANGED
-          });
-        }
-      });
-    }
-
-    this.beforeResize = new BeforeResize({
-      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));
-  }
-  /**
-   * Returns the initial state of the `VirtualScroller`.
-   * @param  {object} [customState] — Any additional "custom" state may be stored in `VirtualScroller`'s state. For example, React implementation stores item "refs" as "custom" state.
-   * @return {object}
-   */
 
+      var stateUpdate = this._stoppedStateUpdate;
+      this._stoppedStateUpdate = undefined; // Reset `this.verticalSpacing` so that it re-measures it in cases when
+      // the `VirtualScroller` was previously stopped and is now being restarted.
+      // The rationale is that a previously captured inter-item vertical spacing
+      // can't be "trusted" in a sense that the user might have resized the window
+      // after the previous `state` has been snapshotted.
+      // If the user has resized the window, then changing window width might have
+      // activated different CSS `@media()` "queries" resulting in a potentially different
+      // vertical spacing after the restart.
+      // If it's not a restart then `this.verticalSpacing` is `undefined` anyway.
 
-  _createClass(VirtualScroller, [{
-    key: "getInitialState",
-    value: function getInitialState(customState) {
-      var items = this.initialItems;
+      this.verticalSpacing = undefined;
+      var verticalSpacingStateUpdate = this.measureItemHeightsAndSpacing();
 
-      var state = _objectSpread(_objectSpread(_objectSpread({}, customState), this.getInitialLayoutState(items)), {}, {
-        items: items,
-        itemStates: new Array(items.length)
-      });
-
-      if (isDebug()) {
-        log('Initial state (autogenerated)', getStateSnapshot(state));
+      if (verticalSpacingStateUpdate) {
+        stateUpdate = _objectSpread(_objectSpread({}, stateUpdate), verticalSpacingStateUpdate);
       }
 
-      log('First shown item index', state.firstShownItemIndex);
-      log('Last shown item index', state.lastShownItemIndex);
-      return state;
-    }
-  }, {
-    key: "getInitialLayoutState",
-    value: function getInitialLayoutState(items) {
-      var itemsCount = items.length;
-
-      var _this$layout$getIniti = this.layout.getInitialLayoutValues({
-        itemsCount: itemsCount,
-        columnsCount: this.getActualColumnsCount()
-      }),
-          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);
-      return {
-        itemHeights: itemHeights,
-        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: "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",
-    value: function getColumnsCount() {
-      return this.getState() && this.getState().columnsCount || 1;
-    }
-  }, {
-    key: "getItemsCount",
-    value: function getItemsCount() {
-      return this.getState().items.length;
-    }
-  }, {
-    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 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.
+      this.resize.start();
+      this.scroll.start(); // If `scrollableContainerWidth` hasn't been measured yet,
+      // measure it and write it to state.
 
-      return this.scrollableContainer.getHeight() * renderAheadMarginRatio;
-    }
-    /**
-     * Calls `onItemFirstRender()` for items that haven't been
-     * "seen" previously.
-     * @param  {any[]} items
-     * @param  {number[]} itemHeights
-     * @param  {number} firstShownItemIndex
-     * @param  {number} lastShownItemIndex
-     */
-
-  }, {
-    key: "onBeforeShowItems",
-    value: function onBeforeShowItems(items, itemHeights, firstShownItemIndex, lastShownItemIndex) {
-      if (this.onItemInitialRender) {
-        var i = firstShownItemIndex;
-
-        while (i <= lastShownItemIndex) {
-          if (itemHeights[i] === undefined) {
-            this.onItemInitialRender(items[i]);
-          }
-
-          i++;
+      if (this.getState().scrollableContainerWidth === undefined) {
+        var scrollableContainerWidth = this.scrollableContainer.getWidth();
+        stateUpdate = _objectSpread(_objectSpread({}, stateUpdate), {}, {
+          scrollableContainerWidth: scrollableContainerWidth
+        });
+      } else {
+        // Reset layout:
+        // * If the scrollable container width has changed while stopped.
+        // * If the restored state was calculated for another scrollable container width.
+        var newWidth = this.scrollableContainer.getWidth();
+        var prevWidth = this.getState().scrollableContainerWidth;
+
+        if (newWidth !== prevWidth) {
+          log('~ Scrollable container width changed from', prevWidth, 'to', newWidth, '~'); // `stateUpdate` doesn't get passed to `this.onResize()`, and, therefore,
+          // won't be applied. But that's ok because currently it could only contain:
+          // * `scrollableContainerWidth`
+          // * `verticalSpacing`
+          // * `beforeResize`
+          // All of those get rewritten in `onResize()` anyway.
+
+          return this.onResize();
         }
-      }
-    }
-  }, {
-    key: "onMount",
-    value: function onMount() {
-      warn('`.onMount()` instance method name is deprecated, use `.listen()` instance method name instead.');
-      this.listen();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      warn('`.render()` instance method name is deprecated, use `.listen()` instance method name instead.');
-      this.listen();
-    }
-    /**
-     * Should be invoked after a "container" DOM Element is mounted (inserted into the DOM tree).
-     */
+      } // If the `VirtualScroller` uses custom (external) state storage, then
+      // check if the columns count has changed between calling `.getInitialState()`
+      // and `.start()`. If it has, perform a re-layout "from scratch".
 
-  }, {
-    key: "listen",
-    value: function listen() {
-      if (this.isRendered === false) {
-        throw new Error('[virtual-scroller] Can\'t restart a `VirtualScroller` after it has been stopped');
-      }
-
-      log('~ Rendered (initial) ~'); // `this.isRendered = true` should be the first statement in this function,
-      // otherwise `DOMVirtualScroller` would enter an infinite re-render loop.
 
-      this.isRendered = true;
-      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._usesCustomStateStorage) {
+        var columnsCount = this.getActualColumnsCount();
+        var columnsCountFromState = this.getState().columnsCount || 1;
 
-      if (this.tbody) {
-        addTbodyStyles(this.getItemsContainerElement());
+        if (columnsCount !== columnsCountFromState) {
+          return this.onResize();
+        }
       } // 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"
@@ -1034,48 +186,19 @@ var VirtualScroller = /*#__PURE__*/function () {
 
 
       this.onUpdateShownItemIndexes({
-        reason: LAYOUT_REASON.MOUNTED,
+        reason: LAYOUT_REASON.STARTED,
         stateUpdate: stateUpdate
       });
-    }
-  }, {
-    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.
+    } // Could be passed as a "callback" parameter, so bind it to `this`.
 
-      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) {
-        setTbodyPadding(this.getItemsContainerElement(), this.getState().beforeItemsHeight, this.getState().afterItemsHeight);
-      } // Return a state update.
-
-
-      if (verticalSpacing !== undefined) {
-        return {
-          verticalSpacing: verticalSpacing
-        };
-      }
-    }
   }, {
-    key: "getVisibleArea",
-    value: function getVisibleArea() {
-      var visibleArea = this.scroll.getVisibleAreaBounds();
-      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: "hasToBeStarted",
+    value: function hasToBeStarted() {
+      if (!this._isActive) {
+        throw new Error('[virtual-scroller] `VirtualScroller` hasn\'t been started');
+      }
+    } // Bind it to `this` because this function could hypothetically be passed
+    // as a "callback" parameter.
 
   }, {
     key: "getItemScrollPosition",
@@ -1094,479 +217,30 @@ var VirtualScroller = /*#__PURE__*/function () {
 
       return this.getListTopOffsetInsideScrollableContainer() + itemTopOffsetInList;
     }
-  }, {
-    key: "onUnmount",
-    value: function onUnmount() {
-      warn('`.onUnmount()` instance method name is deprecated, use `.stop()` instance method name instead.');
-      this.stop();
-    }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      warn('`.destroy()` instance method name is deprecated, use `.stop()` instance method name instead.');
-      this.stop();
-    }
-  }, {
-    key: "cancelLayoutTimer",
-    value: function cancelLayoutTimer(_ref6) {
-      var stateUpdate = _ref6.stateUpdate;
-
-      if (this.layoutTimer) {
-        clearTimeout(this.layoutTimer);
-        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 = 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
-     * @param  {object} newState
+     * Forces a re-measure of an item's height.
+     * @param  {number} i — Item index
      */
 
-  }, {
-    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 {
-              warn('Unexpected (non-matching) "firstShownItemIndex" or "lastShownItemIndex" encountered in "didUpdateState()" after appending items');
-              warn('Previously calculated layout', this.previouslyCalculatedLayout);
-              warn('New layout', newLayout);
-              this.previouslyCalculatedLayout = undefined;
-            }
-          }
-
-          return 'SEAMLESS_APPEND';
-        } else {
-          if (this.listHeightChangeWatcher.hasSnapshot()) {
-            if (newLayout.firstShownItemIndex === 0) {
-              // Restore (adjust) scroll position.
-              log('~ Restore Scroll Position ~');
-              var listBottomOffsetChange = this.listHeightChangeWatcher.getListBottomOffsetChange({
-                beforeItemsHeight: newLayout.beforeItemsHeight
-              });
-              this.listHeightChangeWatcher.reset();
-
-              if (listBottomOffsetChange) {
-                log('Scroll down by', listBottomOffsetChange);
-                this.scroll.scrollByY(listBottomOffsetChange);
-              } else {
-                log('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 {
-                  warn('Unexpected (non-matching) "firstShownItemIndex" or "lastShownItemIndex" encountered in "didUpdateState()" after prepending items');
-                  warn('Previously calculated layout', this.previouslyCalculatedLayout);
-                  warn('New layout', newLayout);
-                  this.previouslyCalculatedLayout = undefined;
-                }
-              }
-
-              return 'SEAMLESS_PREPEND';
-            } else {
-              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.
-      //  This can happen when a component repeatedly calls
-      //  `.setState()` inside `componentWillUpdate()` or `componentDidUpdate()`.
-      //  React limits the number of nested updates to prevent infinite loops."
-      if (this._useTimeoutInRenderLoop) {
-        // Cancel a previously scheduled re-layout.
-        stateUpdate = this.cancelLayoutTimer({
-          stateUpdate: stateUpdate
-        }); // Schedule a new re-layout.
-
-        this.scheduleLayoutTimer({
-          reason: reason,
-          stateUpdate: stateUpdate
-        });
-      } else {
-        this.onUpdateShownItemIndexes({
-          reason: reason,
-          stateUpdate: stateUpdate
-        });
-      }
-    }
-  }, {
-    key: "measureVerticalSpacing",
-    value: function measureVerticalSpacing() {
-      if (this.verticalSpacing === undefined) {
-        var _this$getState3 = this.getState(),
-            firstShownItemIndex = _this$getState3.firstShownItemIndex,
-            lastShownItemIndex = _this$getState3.lastShownItemIndex;
-
-        log('~ Measure item vertical spacing ~');
-        var verticalSpacing = getVerticalSpacing({
-          itemsContainer: this.itemsContainer,
-          renderedItemsCount: lastShownItemIndex - firstShownItemIndex + 1
-        });
-
-        if (verticalSpacing === undefined) {
-          log('Not enough items rendered to measure vertical spacing');
-        } else {
-          log('Item vertical spacing', verticalSpacing);
-          this.verticalSpacing = verticalSpacing;
-
-          if (verticalSpacing !== 0) {
-            return verticalSpacing;
-          }
-        }
-      }
-    }
-  }, {
-    key: "remeasureItemHeight",
-    value: function remeasureItemHeight(i) {
-      var _this$getState4 = this.getState(),
-          firstShownItemIndex = _this$getState4.firstShownItemIndex;
-
-      return this.itemHeights.remeasureItemHeight(i, firstShownItemIndex);
-    }
-  }, {
-    key: "onItemStateChange",
-    value: function onItemStateChange(i, newItemState) {
-      if (isDebug()) {
-        log('~ Item state changed ~');
-        log('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.
-
-        log('Previous state' + '\n' + JSON.stringify(this.getState().itemStates[i], null, 2));
-        log('New state' + '\n' + JSON.stringify(newItemState, null, 2));
-      }
-
-      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",
     value: function onItemHeightChange(i) {
-      log('~ Re-measure item height ~');
-      log('Item', i);
-
-      var _this$getState5 = this.getState(),
-          itemHeights = _this$getState5.itemHeights,
-          firstShownItemIndex = _this$getState5.firstShownItemIndex,
-          lastShownItemIndex = _this$getState5.lastShownItemIndex; // Check if the item is still rendered.
-
-
-      if (!(i >= firstShownItemIndex && i <= lastShownItemIndex)) {
-        // There could be valid cases when an item is no longer rendered
-        // by the time `.onItemHeightChange(i)` gets called.
-        // For example, suppose there's a list of several items on a page,
-        // and those items are in "minimized" state (having height 100px).
-        // Then, a user clicks an "Expand all items" button, and all items
-        // in the list are expanded (expanded item height is gonna be 700px).
-        // `VirtualScroller` demands that `.onItemHeightChange(i)` is called
-        // in such cases, and the developer has properly added the code to do that.
-        // So, if there were 10 "minimized" items visible on a page, then there
-        // will be 10 individual `.onItemHeightChange(i)` calls. No issues so far.
-        // But, as the first `.onItemHeightChange(i)` call executes, it immediately
-        // ("synchronously") triggers a re-layout, and that re-layout finds out
-        // that now, because the first item is big, it occupies most of the screen
-        // space, and only the first 3 items are visible on screen instead of 10,
-        // and so it leaves the first 3 items mounted and unmounts the rest 7.
-        // Then, after `VirtualScroller` has rerendered, the code returns to
-        // where it was executing, and calls `.onItemHeightChange(i)` for the
-        // second item. It also triggers an immediate re-layout that finds out
-        // that only the first 2 items are visible on screen, and it unmounts
-        // the third one too. After that, it calls `.onItemHeightChange(i)`
-        // for the third item, but that item is no longer rendered, so its height
-        // can't be measured, and the same's for all the rest of the original 10 items.
-        // So, even though the developer has written their code properly, there're
-        // still situations when the item could be no longer rendered by the time
-        // `.onItemHeightChange(i)` gets called.
-        return warn('The item is no longer rendered. This is not necessarily a bug, and could happen, for example, when there\'re several `onItemHeightChange(i)` calls issued at the same time.');
-      }
-
-      var previousHeight = itemHeights[i];
-
-      if (previousHeight === undefined) {
-        return reportError("\"onItemHeightChange()\" has been called for item ".concat(i, ", but that item hasn't been rendered before."));
-      }
-
-      var newHeight = this.remeasureItemHeight(i);
-      log('Previous height', previousHeight);
-      log('New height', newHeight);
-
-      if (previousHeight !== newHeight) {
-        log('~ Item height has changed ~'); // Update or reset previously calculated layout.
-
-        this.updatePreviouslyCalculatedLayoutOnItemHeightChange(i, previousHeight, newHeight); // Recalculate layout.
-
-        this.onUpdateShownItemIndexes({
-          reason: 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.hasToBeStarted();
 
-          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;
-        }
-      }
+      this._onItemHeightChange(i);
     }
     /**
-     * Validates 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
-     * in the actual height of the list item being different
-     * from what has been initially measured in `this.itemHeights[i]`,
-     * if the developer didn't call `.onItemStateChange()` and `.onItemHeightChange(i)`.
+     * Updates an item's state in `state.itemStates[]`.
+     * @param  {number} i — Item index
+     * @param  {any} i — Item's new state
      */
 
   }, {
-    key: "validateWillBeHiddenItemHeightsAreAccurate",
-    value: function validateWillBeHiddenItemHeightsAreAccurate(firstShownItemIndex, lastShownItemIndex) {
-      var isValid = true;
-      var i = this.getState().firstShownItemIndex;
-
-      while (i <= this.getState().lastShownItemIndex) {
-        if (i >= firstShownItemIndex && i <= lastShownItemIndex) {// The item's still visible.
-        } else {
-          // The item will be hidden. Re-measure its height.
-          // The rationale is that there could be a situation when an item's
-          // height has changed, and the developer has properly added an
-          // `.onItemHeightChange(i)` call to notify `VirtualScroller`
-          // about that change, but at the same time that wouldn't work.
-          // For example, suppose there's a list of several items on a page,
-          // and those items are in "minimized" state (having height 100px).
-          // Then, a user clicks an "Expand all items" button, and all items
-          // in the list are expanded (expanded item height is gonna be 700px).
-          // `VirtualScroller` demands that `.onItemHeightChange(i)` is called
-          // in such cases, and the developer has properly added the code to do that.
-          // So, if there were 10 "minimized" items visible on a page, then there
-          // will be 10 individual `.onItemHeightChange(i)` calls. No issues so far.
-          // But, as the first `.onItemHeightChange(i)` call executes, it immediately
-          // ("synchronously") triggers a re-layout, and that re-layout finds out
-          // that now, because the first item is big, it occupies most of the screen
-          // space, and only the first 3 items are visible on screen instead of 10,
-          // and so it leaves the first 3 items mounted and unmounts the rest 7.
-          // Then, after `VirtualScroller` has rerendered, the code returns to
-          // where it was executing, and calls `.onItemHeightChange(i)` for the
-          // second item. It also triggers an immediate re-layout that finds out
-          // that only the first 2 items are visible on screen, and it unmounts
-          // the third one too. After that, it calls `.onItemHeightChange(i)`
-          // for the third item, but that item is no longer rendered, so its height
-          // can't be measured, and the same's for all the rest of the original 10 items.
-          // So, even though the developer has written their code properly, the
-          // `VirtualScroller` still ends up having incorrect `itemHeights[]`:
-          // `[700px, 700px, 100px, 100px, 100px, 100px, 100px, 100px, 100px, 100px]`
-          // while it should have been `700px` for all of them.
-          // To work around such issues, every item's height is re-measured before it
-          // gets hidden.
-          var previouslyMeasuredItemHeight = this.getState().itemHeights[i];
-          var actualItemHeight = this.remeasureItemHeight(i);
-
-          if (actualItemHeight !== previouslyMeasuredItemHeight) {
-            if (isValid) {
-              log('~ Validate will-be-hidden item heights. ~'); // Update or reset previously calculated layout.
-
-              this.updatePreviouslyCalculatedLayoutOnItemHeightChange(i, previouslyMeasuredItemHeight, actualItemHeight);
-            }
-
-            isValid = false;
-            warn('Item index', i, 'is no longer visible and will be unmounted. Its height has changed from', previouslyMeasuredItemHeight, 'to', actualItemHeight, 'since it was last measured. This is not necessarily a bug, and could happen, for example, on screen width change, or when there\'re several `onItemHeightChange(i)` calls issued at the same time, and the first one triggers a re-layout before the rest of them have had a chance to be executed.');
-          }
-        }
-
-        i++;
-      }
-
-      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) {
-        log('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
-     * `firstNonMeasuredItemIndex` is defined.
-     * If the list is visible and all items being shown have been encountered
-     * (and measured) before, then `firstNonMeasuredItemIndex` is `undefined`.
-     *
-     * The `stateUpdate` parameter is just an optional "additional" state update.
-     */
+    key: "onItemStateChange",
+    value: function onItemStateChange(i, newItemState) {
+      this.hasToBeStarted();
 
-  }, {
-    key: "updateItems",
-    value:
-    /**
-     * @deprecated
-     * `.updateItems()` has been renamed to `.setItems()`.
-     */
-    function updateItems(newItems, options) {
-      return this.setItems(newItems, options);
+      this._onItemStateChange(i, newItemState);
     }
     /**
      * Updates `items`. For example, can prepend or append new items to the list.
@@ -1578,409 +252,8 @@ var VirtualScroller = /*#__PURE__*/function () {
     key: "setItems",
     value: function setItems(newItems) {
       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$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$getState7 = this.getState(),
-          itemStates = _this$getState7.itemStates;
-
-      var _ref9 = this.resetLayoutAfterResize ? this.resetLayoutAfterResize.stateUpdate : this.getState(),
-          itemHeights = _ref9.itemHeights;
-
-      log('~ Update items ~');
-      var layoutUpdate;
-      var itemsUpdateInfo; // Compare the new items to the current items.
-
-      var itemsDiff = this.getItemsDiff(previousItems, newItems); // See if it's an "incremental" items update.
-
-      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
-        }, {
-          prependedItemsCount: prependedItemsCount,
-          appendedItemsCount: appendedItemsCount
-        }, {
-          itemsCount: newItems.length,
-          columnsCount: this.getActualColumnsCount(),
-          shouldRestoreScrollPosition: shouldRestoreScrollPosition
-        });
-
-        if (prependedItemsCount > 0) {
-          log('Prepend', prependedItemsCount, 'items');
-          itemHeights = new Array(prependedItemsCount).concat(itemHeights);
-
-          if (itemStates) {
-            itemStates = new Array(prependedItemsCount).concat(itemStates);
-          } // Restore scroll position after prepending items (if requested).
-
-
-          if (shouldRestoreScrollPosition) {
-            log('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 {
-            log('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;
-          }
-        }
-
-        if (appendedItemsCount > 0) {
-          log('Append', appendedItemsCount, 'items');
-          itemHeights = itemHeights.concat(new Array(appendedItemsCount));
-
-          if (itemStates) {
-            itemStates = itemStates.concat(new Array(appendedItemsCount));
-          }
-        }
-
-        itemsUpdateInfo = {
-          prepend: prependedItemsCount > 0,
-          append: appendedItemsCount > 0
-        };
-      } else {
-        log('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.');
-        log('Previous items', previousItems);
-        log('New items', newItems); // Reset item heights and item states.
-
-        itemHeights = new Array(newItems.length);
-        itemStates = new Array(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
-        };
-      }
-
-      log('~ Update state ~'); // const layoutValuesAfterUpdate = {
-      // 	...this.getState(),
-      // 	...layoutUpdate
-      // }
-      // `layoutUpdate` is equivalent to `layoutValuesAfterUpdate` because
-      // `layoutUpdate` contains all the relevant properties.
-
-      log('First shown item index', layoutUpdate.firstShownItemIndex);
-      log('Last shown item index', layoutUpdate.lastShownItemIndex);
-      log('Before items height', layoutUpdate.beforeItemsHeight);
-      log('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 _getItemsDiff(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.min(Math.ceil((lastShownItemIndex + 1) / newColumnsCount) * newColumnsCount, itemsCount) - 1; // Potentially update `firstShownItemIndex` if it needs to be adjusted in order to
-      // correspond to the new `columnsCount`.
-
-      if (newFirstShownItemIndex !== firstShownItemIndex) {
-        log('Columns Count changed from', this.getState().columnsCount || 1, 'to', newColumnsCount);
-        log('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);
+      this.hasToBeStarted();
+      return this._setItems(newItems, options);
     }
   }]);
 
@@ -1988,5 +261,4 @@ var VirtualScroller = /*#__PURE__*/function () {
 }();
 
 export { VirtualScroller as default };
-var SLOW_LAYOUT_DURATION = 15; // in milliseconds.
 //# sourceMappingURL=VirtualScroller.js.map