virtual-scroller 1.7.9 → 1.9.0

package/modules/VirtualScroller.js

@@ -1,1007 +1,246 @@
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = 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 DOMRenderingEngine from './DOM/RenderingEngine';
-import WaitForStylesToLoad from './DOM/WaitForStylesToLoad';
-import Layout, { LAYOUT_REASON } from './Layout';
-import Resize from './Resize';
-import Scroll from './Scroll';
-import RestoreScroll from './RestoreScroll';
-import ItemHeights from './ItemHeights';
-import _getItemsDiff from './getItemsDiff';
-import getVerticalSpacing from './getVerticalSpacing'; // import getItemCoordinates from './getItemCoordinates'
-
-import log, { warn, isDebug, reportError } from './utility/debug';
-import shallowEqual from './utility/shallowEqual';
+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 () {
+var VirtualScroller = /*#__PURE__*/function () {
   /**
-   * @param  {function} getContainerElement — Returns the container DOM `Element`.
+   * @param  {function} getItemsContainerElement — Returns the container DOM `Element`.
    * @param  {any[]} items — The list of items.
    * @param  {Object} [options] — See README.md.
    * @return {VirtualScroller}
    */
-  function VirtualScroller(getContainerElement, items) {
+  function VirtualScroller(getItemsContainerElement, items) {
     var _this = this;
 
     var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
     _classCallCheck(this, VirtualScroller);
 
-    _defineProperty(this, "getListTopOffsetInsideScrollableContainer", function () {
-      var listTopOffset = _this.scrollableContainer.getTopOffset(_this.getContainerElement());
-
-      _this.waitForStylesToLoad.onGotListTopOffset(listTopOffset);
-
-      return listTopOffset;
-    });
-
-    _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 ~');
-      _this.newItemsPending = undefined;
-      _this.layoutResetPending = undefined;
-      var redoLayoutReason = _this.redoLayoutReason;
-      _this.redoLayoutReason = undefined;
-      var previousItems = prevState.items;
-      var newItems = newState.items;
-
-      if (newItems !== previousItems) {
-        var layoutNeedsReCalculating = true;
-
-        var itemsDiff = _this.getItemsDiff(previousItems, newItems); // If it's an "incremental" update.
-
-
-        if (itemsDiff) {
-          var prependedItemsCount = itemsDiff.prependedItemsCount,
-              appendedItemsCount = itemsDiff.appendedItemsCount;
-
-          if (prependedItemsCount > 0) {
-            // The call to `.onPrepend()` must precede
-            // the call to `.measureItemHeights()`
-            // which is called in `.onRendered()`.
-            _this.itemHeights.onPrepend(prependedItemsCount);
-
-            if (_this.restoreScroll.shouldRestoreScrollAfterRender()) {
-              layoutNeedsReCalculating = false;
-              log('~ Restore Scroll Position ~');
-
-              var scrollByY = _this.restoreScroll.getScrollDifference();
-
-              if (scrollByY) {
-                log('Scroll down by', scrollByY);
-
-                _this.scroll.scrollByY(scrollByY);
-              } else {
-                log('Scroll position hasn\'t changed');
-              }
-            }
-          }
-        } else {
-          _this.itemHeights.reset();
-
-          _this.itemHeights.initialize(_this.getState().itemHeights);
-        }
-
-        if (layoutNeedsReCalculating) {
-          redoLayoutReason = LAYOUT_REASON.ITEMS_CHANGED;
-        }
-      } // Call `.onRendered()` if shown items configuration changed.
-
-
-      if (newState.firstShownItemIndex !== prevState.firstShownItemIndex || newState.lastShownItemIndex !== prevState.lastShownItemIndex || newState.items !== prevState.items) {
-        _this.onRenderedNewLayout();
-      }
-
-      if (redoLayoutReason) {
-        return _this.redoLayoutRightAfterRender({
-          reason: redoLayoutReason
-        });
+    _defineProperty(this, "stop", function () {
+      if (!_this._isActive) {
+        throw new Error('[virtual-scroller] Can\'t stop a `VirtualScroller` that hasn\'t been started');
       }
-    });
-
-    _defineProperty(this, "updateShownItemIndexes", function () {
-      log('~ Layout results ' + (_this.bypass ? '(bypass) ' : '') + '~');
-
-      var visibleAreaIncludingMargins = _this.getVisibleAreaBoundsIncludingMargins();
-
-      _this.latestLayoutVisibleAreaIncludingMargins = visibleAreaIncludingMargins;
-
-      var listTopOffsetInsideScrollableContainer = _this.getListTopOffsetInsideScrollableContainer(); // Get shown item indexes.
-
-
-      var _this$layout$getShown = _this.layout.getShownItemIndexes({
-        listHeight: _this.screen.getElementHeight(_this.getContainerElement()),
-        itemsCount: _this.getItemsCount(),
-        visibleAreaIncludingMargins: visibleAreaIncludingMargins,
-        listTopOffsetInsideScrollableContainer: listTopOffsetInsideScrollableContainer
-      }),
-          firstShownItemIndex = _this$layout$getShown.firstShownItemIndex,
-          lastShownItemIndex = _this$layout$getShown.lastShownItemIndex,
-          redoLayoutAfterMeasuringItemHeights = _this$layout$getShown.redoLayoutAfterMeasuringItemHeights; // If scroll position is scheduled to be restored after render,
-      // then the "anchor" item must be rendered, and all of the prepended
-      // items before it, all in a single pass. This way, all of the
-      // prepended items' heights could be measured right after the render
-      // has finished, and the scroll position can then be immediately restored.
-
-
-      if (_this.restoreScroll.shouldRestoreScrollAfterRender()) {
-        if (lastShownItemIndex < _this.restoreScroll.getAnchorItemIndex()) {
-          lastShownItemIndex = _this.restoreScroll.getAnchorItemIndex();
-        } // `firstShownItemIndex` is always `0` when prepending items.
-        // And `lastShownItemIndex` always covers all prepended items in this case.
-        // None of the prepended items have been rendered before,
-        // so their heights are unknown. The code at the start of this function
-        // did therefore set `redoLayoutAfterMeasuringItemHeights` to `true`
-        // 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.
-
-
-        redoLayoutAfterMeasuringItemHeights = false;
-      } // 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)) {
-        // Redo layout, now with the correct item heights.
-        log('~ Some of the will-be-hidden item heights have changed since they\'ve last been measured. Redo layout. ~');
-        return _this.updateShownItemIndexes();
-      } // Measure "before" items height.
+      _this._isActive = false;
+      log('~ Stop ~');
 
+      _this.resize.stop();
 
-      var beforeItemsHeight = _this.layout.getBeforeItemsHeight(firstShownItemIndex, lastShownItemIndex); // Measure "after" items height.
+      _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.
 
 
-      var afterItemsHeight = _this.layout.getAfterItemsHeight(firstShownItemIndex, lastShownItemIndex, _this.getItemsCount()); // Debugging.
+      if (_this.listTopOffsetWatcher && _this.listTopOffsetWatcher.isStarted()) {
+        _this.listTopOffsetWatcher.stop();
+      } // Cancel any scheduled layout.
 
 
-      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 (calculated on previous render)', _this.itemHeights.getAverage());
-
-      if (isDebug()) {
-        log('Item heights', _this.getState().itemHeights.slice());
-        log('Item states', _this.getState().itemStates.slice());
-      }
-
-      if (redoLayoutAfterMeasuringItemHeights) {
-        // `this.redoLayoutReason` will be detected in `didUpdateState()`.
-        // `didUpdateState()` is triggered by `this.setState()` below.
-        _this.redoLayoutReason = LAYOUT_REASON.ITEM_HEIGHT_NOT_MEASURED;
-      } // Optionally preload items to be rendered.
-
-
-      _this.onBeforeShowItems(_this.getState().items, _this.getState().itemHeights, firstShownItemIndex, lastShownItemIndex); // Render.
-
-
-      _this.setState({
-        firstShownItemIndex: firstShownItemIndex,
-        lastShownItemIndex: lastShownItemIndex,
-        beforeItemsHeight: beforeItemsHeight,
-        afterItemsHeight: afterItemsHeight // // Average item height is stored in state to differentiate between
-        // // the initial state and "anything has been measured already" state.
-        // averageItemHeight: this.itemHeights.getAverage()
-
-      });
-    });
-
-    _defineProperty(this, "onUpdateShownItemIndexes", function (_ref) {
-      var reason = _ref.reason;
-
-      // If there're no items then there's no need to re-layout anything.
-      if (_this.getItemsCount() === 0) {
-        return;
-      } // Cancel a "re-layout when user stops scrolling" timer.
-
-
-      _this.scroll.onLayout(); // Cancel a re-layout that is scheduled to run at the next "frame",
-      // because a re-layout will be performed right now.
-
-
-      if (_this.layoutTimer) {
-        clearTimeout(_this.layoutTimer);
-        _this.layoutTimer = undefined;
-      } // Perform a re-layout.
-
-
-      log("~ Calculate Layout (on ".concat(reason, ") ~"));
-
-      _this.updateShownItemIndexes();
+      _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 getState = options.getState,
-        setState = options.setState,
-        onStateChange = options.onStateChange,
-        customState = options.customState,
-        preserveScrollPositionAtBottomOnMount = options.preserveScrollPositionAtBottomOnMount,
-        preserveScrollPositionOfTheBottomOfTheListOnMount = options.preserveScrollPositionOfTheBottomOfTheListOnMount,
-        initialScrollPosition = options.initialScrollPosition,
-        onScrollPositionChange = options.onScrollPositionChange,
-        measureItemsBatchSize = options.measureItemsBatchSize,
-        getScrollableContainer = options.getScrollableContainer,
-        getColumnsCount = options.getColumnsCount,
-        getItemId = options.getItemId,
-        tbody = options.tbody,
-        _useTimeoutInRenderLoop = options._useTimeoutInRenderLoop;
-    var bypass = options.bypass,
-        estimatedItemHeight = options.estimatedItemHeight,
-        onItemInitialRender = options.onItemInitialRender,
-        onItemFirstRender = options.onItemFirstRender,
-        scrollableContainer = options.scrollableContainer,
-        state = options.state,
-        renderingEngine = options.renderingEngine;
-    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 (!renderingEngine) {
-      renderingEngine = DOMRenderingEngine;
-    }
-
-    this.screen = renderingEngine.createScreen();
-    this.scrollableContainer = renderingEngine.createScrollableContainer(scrollableContainer); // if (margin === undefined) {
-    // 	// Renders items which are outside of the screen by this "margin".
-    // 	// Is the screen height by default: seems to be the optimal value
-    // 	// for "Page Up" / "Page Down" navigation and optimized mouse wheel scrolling.
-    // 	margin = this.scrollableContainer ? this.scrollableContainer.getHeight() : 0
-    // }
-    // Work around `<tbody/>` not being able to have `padding`.
-    // https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1
-
-    if (tbody) {
-      if (renderingEngine.name !== 'DOM') {
-        throw new Error('`tbody` option is only supported for DOM rendering engine');
-      }
-
-      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."
-
-    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.margin = margin
-
-    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 _this$getState = _this.getState(),
-              items = _this$getState.items;
-
-          var i = items.indexOf(item); // The `item` could also be non-found due to the inconsistency bug:
-          // The reason is that `i` can be non-consistent with the `items`
-          // passed to `<VirtualScroller/>` in React due to `setState()` not being
-          // instanteneous: when new `items` are passed to `<VirtualScroller/>`,
-          // `VirtualScroller.setState({ items })` is called, and if `onItemFirstRender(i)`
-          // is called after the aforementioned `setState()` is called but before it finishes,
-          // `i` would point to an index in "previous" `items` while the application
-          // would assume that `i` points to an index in the "new" `items`,
-          // resulting in an incorrect item being assumed by the application
-          // or even in an "array index out of bounds" error.
-
-          if (i >= 0) {
-            onItemFirstRender(i);
-          }
-        };
-      }
-
-    log('Items count', items.length);
-
-    if (estimatedItemHeight) {
-      log('Estimated item height', estimatedItemHeight);
-    }
-
-    if (setState) {
-      this.getState = getState;
-
-      this.setState = function (state) {
-        log('Set state', state);
-        setState(state, {
-          willUpdateState: _this.willUpdateState,
-          didUpdateState: _this.didUpdateState
-        });
-      };
-    } else {
-      this.getState = function () {
-        return _this.state;
-      };
-
-      this.setState = function (state) {
-        log('Set state', state);
-
-        var prevState = _this.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({}, prevState, state);
-
-        _this.willUpdateState(newState, prevState);
-
-        _this.state = newState;
-
-        _this.didUpdateState(prevState);
-      };
-    }
-
-    if (state) {
-      log('Initial state (passed)', state);
-    } // Sometimes, when `new VirtualScroller()` instance is created,
-    // `getContainerElement()` might not be ready to return the "container" DOM Element yet
-    // (for example, because it's not rendered yet). That's the reason why it's a getter function.
-    // For example, in React `<VirtualScroller/>` component, a `VirtualScroller`
-    // instance is created in the React component's `constructor()`, and at that time
-    // the container Element is not yet available. The container Element is available
-    // in `componentDidMount()`, but `componentDidMount()` is not executed on server,
-    // which would mean that React `<VirtualScroller/>` wouldn't render at all
-    // on server side, while with the `getContainerElement()` approach, on server side,
-    // it still "renders" a list with a predefined amount of items in it by default.
-    // (`initiallyRenderedItemsCount`, or `1`).
-
-
-    this.getContainerElement = getContainerElement; // Remove any accidental text nodes from container (like whitespace).
-    // Also guards against cases when someone accidentally tries
-    // using `VirtualScroller` on a non-empty element.
-
-    if (getContainerElement()) {
-      this.screen.clearElement(getContainerElement());
-    }
-
-    this.itemHeights = new ItemHeights(this.screen, this.getContainerElement, 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.layout = new Layout({
-      bypass: bypass,
-      estimatedItemHeight: estimatedItemHeight,
-      measureItemsBatchSize: measureItemsBatchSize === undefined ? 50 : measureItemsBatchSize,
-      getVerticalSpacing: function getVerticalSpacing() {
-        return _this.getVerticalSpacing();
-      },
-      getColumnsCount: function getColumnsCount() {
-        return _this.getColumnsCount();
-      },
-      getItemHeight: function getItemHeight(i) {
-        return _this.getState().itemHeights[i];
-      },
-      getAverageItemHeight: function getAverageItemHeight() {
-        return _this.itemHeights.getAverage();
-      }
-    });
-    this.resize = new Resize({
-      bypass: bypass,
-      scrollableContainer: this.scrollableContainer,
-      getContainerElement: this.getContainerElement,
-      updateLayout: function updateLayout(_ref2) {
-        var reason = _ref2.reason;
-        return _this.onUpdateShownItemIndexes({
-          reason: reason
-        });
-      },
-      resetStateAndLayout: function resetStateAndLayout() {
-        // Reset item heights, because if scrollable container's width (or height)
-        // has changed, then the list width (or height) most likely also has changed,
-        // and also some CSS `@media()` rules might have been added or removed.
-        // So re-render the list entirely.
-        log('~ Scrollable container size changed, re-measure item heights. ~');
-        _this.redoLayoutReason = LAYOUT_REASON.RESIZE; // `this.layoutResetPending` flag will be cleared in `didUpdateState()`.
-
-        _this.layoutResetPending = true;
-        log('Reset state'); // Calling `this.setState(state)` will trigger `didUpdateState()`.
-        // `didUpdateState()` will detect `this.redoLayoutReason`.
-
-        _this.setState(_this.getInitialLayoutState(_this.newItemsPending || _this.getState().items));
-      }
-    });
-
-    if (preserveScrollPositionAtBottomOnMount) {
-      warn('`preserveScrollPositionAtBottomOnMount` option/property has been renamed to `preserveScrollPositionOfTheBottomOfTheListOnMount`');
-    }
-
-    this.preserveScrollPositionOfTheBottomOfTheListOnMount = preserveScrollPositionOfTheBottomOfTheListOnMount || preserveScrollPositionAtBottomOnMount;
-    this.scroll = new Scroll({
-      bypass: this.bypass,
-      scrollableContainer: this.scrollableContainer,
-      updateLayout: function updateLayout(_ref3) {
-        var reason = _ref3.reason;
-        return _this.onUpdateShownItemIndexes({
-          reason: reason
-        });
-      },
-      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;
-      },
-      getLatestLayoutVisibleAreaIncludingMargins: function getLatestLayoutVisibleAreaIncludingMargins() {
-        return _this.latestLayoutVisibleAreaIncludingMargins;
-      },
-      preserveScrollPositionOfTheBottomOfTheListOnMount: this.preserveScrollPositionOfTheBottomOfTheListOnMount
-    });
-    this.restoreScroll = new RestoreScroll({
-      screen: this.screen,
-      getContainerElement: this.getContainerElement
-    });
-    this.waitForStylesToLoad = new WaitForStylesToLoad({
-      updateLayout: function updateLayout(_ref4) {
-        var reason = _ref4.reason;
-        return _this.onUpdateShownItemIndexes({
-          reason: reason
-        });
-      },
-      getListTopOffsetInsideScrollableContainer: this.getListTopOffsetInsideScrollableContainer
-    });
-    this.setState(state || this.getInitialState(customState));
+    VirtualScrollerConstructor.call(this, getItemsContainerElement, items, options);
   }
   /**
-   * 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}
+   * Should be invoked after a "container" DOM Element is mounted (inserted into the DOM tree).
    */
 
 
   _createClass(VirtualScroller, [{
-    key: "getInitialState",
-    value: function getInitialState(customState) {
-      var items = this.initialItems;
+    key: "start",
+    value: function start() {
+      if (this._isActive) {
+        throw new Error('[virtual-scroller] `VirtualScroller` has already been started');
+      } // If has been stopped previously.
 
-      var state = _objectSpread({}, customState, this.getInitialLayoutState(items), {
-        items: items,
-        itemStates: new Array(items.length)
-      });
 
-      log('Initial state (autogenerated)', state);
-      log('First shown item index', state.firstShownItemIndex);
-      log('Last shown item index', state.lastShownItemIndex);
-      return state;
-    }
-  }, {
-    key: "getInitialLayoutValues",
-    value: function getInitialLayoutValues(_ref5) {
-      var itemsCount = _ref5.itemsCount,
-          bypass = _ref5.bypass;
-      return this.layout.getInitialLayoutValues({
-        bypass: bypass,
-        itemsCount: itemsCount,
-        visibleAreaHeightIncludingMargins: this.scrollableContainer && 2 * this.getMargin() + this.scrollableContainer.getHeight()
-      });
-    }
-  }, {
-    key: "getInitialLayoutState",
-    value: function getInitialLayoutState(items) {
-      var itemsCount = items.length;
-
-      var _this$getInitialLayou = this.getInitialLayoutValues({
-        itemsCount: itemsCount,
-        bypass: this.preserveScrollPositionOfTheBottomOfTheListOnMount
-      }),
-          firstShownItemIndex = _this$getInitialLayou.firstShownItemIndex,
-          lastShownItemIndex = _this$getInitialLayou.lastShownItemIndex,
-          beforeItemsHeight = _this$getInitialLayou.beforeItemsHeight,
-          afterItemsHeight = _this$getInitialLayou.afterItemsHeight;
+      var isRestart = this._isActive === false;
 
-      var itemHeights = new Array(itemsCount); // Optionally preload items to be rendered.
+      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.
 
-      this.onBeforeShowItems(items, itemHeights, firstShownItemIndex, lastShownItemIndex); // This "initial" state object must include all possible state properties
-      // because `this.setState()` gets called with this state on window resize,
-      // when `VirtualScroller` gets reset.
-      // Item states aren't included here because the state of all items should be
-      // preserved on window resize.
 
-      return {
-        itemHeights: itemHeights,
-        columnsCount: this._getColumnsCount ? this._getColumnsCount(this.scrollableContainer) : undefined,
-        verticalSpacing: undefined,
-        firstShownItemIndex: firstShownItemIndex,
-        lastShownItemIndex: lastShownItemIndex,
-        beforeItemsHeight: beforeItemsHeight,
-        afterItemsHeight: afterItemsHeight
-      };
-    }
-  }, {
-    key: "getVerticalSpacing",
-    value: function getVerticalSpacing() {
-      return this.getState() && this.getState().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: "getMargin",
-    value: function getMargin() {
-      // `VirtualScroller` also items that are outside of the screen
-      // by the amount of this "render ahead margin" (both on top and bottom).
-      // The default "render ahead margin" is equal to the screen height:
-      // this seems to be the optimal value for "Page Up" / "Page Down" navigation
-      // and optimized mouse wheel scrolling (a user is unlikely to continuously
-      // scroll past the height of a screen, and when they stop scrolling,
-      // the list is re-rendered).
-      var renderAheadMarginRatio = 1; // in scrollable container heights.
-
-      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._render) {
+          this._render(this.getState());
         }
       }
-    }
-  }, {
-    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).
-     */
-
-  }, {
-    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.
+      log('~ Start ~'); // `this._isActive = true` should be placed somewhere at the start of this function.
 
-      this.isRendered = true;
-      this.onRenderedNewLayout();
-      this.resize.listen();
-      this.scroll.listen(); // Work around `<tbody/>` not being able to have `padding`.
-      // https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1
+      this._isActive = true; // Reset `ListHeightMeasurement` just in case it has some "leftover" state.
 
-      if (this.tbody) {
-        addTbodyStyles(this.getContainerElement());
-      }
+      this.listHeightMeasurement.reset(); // Reset `_isResizing` flag just in case it has some "leftover" value.
 
-      if (this.preserveScrollPositionOfTheBottomOfTheListOnMount) {// In this case, all items are shown, so there's no need to call
-        // `this.onUpdateShownItemIndexes()` after the initial render.
-      } else {
-        this.onUpdateShownItemIndexes({
-          reason: LAYOUT_REASON.MOUNT
-        });
-      }
-    }
-  }, {
-    key: "onRenderedNewLayout",
-    value: function onRenderedNewLayout() {
-      // Update item vertical spacing.
-      this.measureVerticalSpacing(); // Measure "newly shown" item heights.
-      // Also re-validate already measured items' heights.
+      this._isResizing = undefined; // Reset `_isSettingNewItems` flag just in case it has some "leftover" value.
 
-      this.itemHeights.measureItemHeights(this.getState().firstShownItemIndex, this.getState().lastShownItemIndex); // Update `<tbody/>` `padding`.
-      // (`<tbody/>` is different in a way that it can't have `margin`, only `padding`).
+      this._isSettingNewItems = undefined; // Work around `<tbody/>` not being able to have `padding`.
       // https://gitlab.com/catamphetamine/virtual-scroller/-/issues/1
 
       if (this.tbody) {
-        setTbodyPadding(this.getContainerElement(), this.getState().beforeItemsHeight, this.getState().afterItemsHeight);
-      }
-    }
-  }, {
-    key: "getVisibleAreaBoundsIncludingMargins",
-    value: function getVisibleAreaBoundsIncludingMargins() {
-      var visibleArea = this.scroll.getVisibleAreaBounds();
-      visibleArea.top -= this.getMargin();
-      visibleArea.bottom += this.getMargin();
-      return visibleArea;
-    }
-    /**
-     * Returns the list's top offset relative to the scrollable container's top edge.
-     * @return {number}
-     */
-
-  }, {
-    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: "stop",
-    value: function stop() {
-      this.isRendered = false;
-      this.resize.stop();
-      this.scroll.stop();
-      this.waitForStylesToLoad.stop();
-
-      if (this.layoutTimer) {
-        clearTimeout(this.layoutTimer);
-        this.layoutTimer = undefined;
+        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 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.
+      //
+
+
+      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.
+
+      this.verticalSpacing = undefined;
+      var verticalSpacingStateUpdate = this.measureItemHeightsAndSpacing();
+
+      if (verticalSpacingStateUpdate) {
+        stateUpdate = _objectSpread(_objectSpread({}, stateUpdate), verticalSpacingStateUpdate);
       }
-    }
-    /**
-     * Should be called right before `state` is updated.
-     * @param  {object} prevState
-     * @param  {object} newState
-     */
 
-  }, {
-    key: "redoLayoutRightAfterRender",
-    value: function redoLayoutRightAfterRender(_ref6) {
-      var _this2 = this;
+      this.resize.start();
+      this.scroll.start(); // If `scrollableContainerWidth` hasn't been measured yet,
+      // measure it and write it to state.
 
-      var reason = _ref6.reason;
+      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();
+        }
+      } // 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".
 
-      // 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.
-        if (this.layoutTimer) {
-          clearTimeout(this.layoutTimer);
-        } // Schedule a new re-layout.
 
+      if (this._usesCustomStateStorage) {
+        var columnsCount = this.getActualColumnsCount();
+        var columnsCountFromState = this.getState().columnsCount || 1;
 
-        this.layoutTimer = setTimeout(function () {
-          _this2.layoutTimer = undefined;
+        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"
+      // in a way that it could have been snapshotted for another window width and
+      // the user might have resized their window since then.
 
-          _this2.onUpdateShownItemIndexes({
-            reason: reason
-          });
-        }, 0);
-      } else {
-        this.onUpdateShownItemIndexes({
-          reason: reason
-        });
-      }
-    }
-  }, {
-    key: "measureVerticalSpacing",
-    value: function measureVerticalSpacing() {
-      if (this.getState().verticalSpacing === undefined) {
-        log('~ Measure item vertical spacing ~');
-        var verticalSpacing = getVerticalSpacing({
-          container: this.getContainerElement(),
-          screen: this.screen
-        });
 
-        if (verticalSpacing === undefined) {
-          log('Not enough items rendered to measure vertical spacing');
-        } else {
-          log('Item vertical spacing', verticalSpacing);
-          this.setState({
-            verticalSpacing: verticalSpacing
-          });
-        }
-      }
-    }
-  }, {
-    key: "remeasureItemHeight",
-    value: function remeasureItemHeight(i) {
-      var _this$getState2 = this.getState(),
-          firstShownItemIndex = _this$getState2.firstShownItemIndex;
+      this.onUpdateShownItemIndexes({
+        reason: LAYOUT_REASON.STARTED,
+        stateUpdate: stateUpdate
+      });
+    } // Could be passed as a "callback" parameter, so bind it to `this`.
 
-      return this.itemHeights.remeasureItemHeight(i, firstShownItemIndex);
-    }
   }, {
-    key: "onItemStateChange",
-    value: function onItemStateChange(i, itemState) {
-      if (isDebug()) {
-        log('~ Item state changed ~');
-        log('Item', i);
-        log('Previous state' + '\n' + JSON.stringify(this.getState().itemStates[i], null, 2));
-        log('New state' + '\n' + JSON.stringify(itemState, null, 2));
+    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.
 
-      this.getState().itemStates[i] = itemState;
-    }
   }, {
-    key: "onItemHeightChange",
-    value: function onItemHeightChange(i) {
-      log('~ Re-measure item height ~');
-      log('Item', i);
-
-      var _this$getState3 = this.getState(),
-          itemHeights = _this$getState3.itemHeights;
-
-      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); // Check if the item is still rendered.
+    key: "getItemScrollPosition",
+    value:
+    /**
+     * Returns the items's top offset relative to the scrollable container's top edge.
+     * @param {number} i — Item index
+     * @return {[number]} Returns the item's scroll Y position. Returns `undefined` if any of the previous items haven't been rendered yet.
+     */
+    function getItemScrollPosition(i) {
+      var itemTopOffsetInList = this.layout.getItemTopOffset(i);
 
-      if (newHeight === undefined) {
-        // 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.');
+      if (itemTopOffsetInList === undefined) {
+        return;
       }
 
-      log('Previous height', previousHeight);
-      log('New height', newHeight);
-
-      if (previousHeight !== newHeight) {
-        log('~ Item height has changed ~'); // log('Item', i)
-
-        this.onUpdateShownItemIndexes({
-          reason: LAYOUT_REASON.ITEM_HEIGHT_CHANGED
-        });
-      }
+      return this.getListTopOffsetInsideScrollableContainer() + itemTopOffsetInList;
     }
     /**
-     * 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)`.
+     * Forces a re-measure of an item's height.
+     * @param  {number} i — Item index
      */
 
   }, {
-    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) {
-            isValid = false;
-            warn('Item', i, 'will be unmounted at next render because it\'s no longer visible. Its height has changed from', previouslyMeasuredItemHeight, 'to', actualItemHeight, 'since it was last measured. This is not necessarily a bug, and could happen, for example, when there\'re several `onItemHeightChange(i)` calls issued at the same time, and the first one triggers a re-layout before the rest of them have had a chance to be executed.');
-          }
-        }
-
-        i++;
-      }
+    key: "onItemHeightChange",
+    value: function onItemHeightChange(i) {
+      this.hasToBeStarted();
 
-      return isValid;
+      this._onItemHeightChange(i);
     }
     /**
-     * Updates the "from" and "to" shown item indexes.
-     * If the list is visible and some of the items being shown are new
-     * and are required to be measured first, then
-     * `redoLayoutAfterMeasuringItemHeights` is `true`.
-     * If the list is visible and all items being shown have been encountered
-     * (and measured) before, then `redoLayoutAfterMeasuringItemHeights` is `false`.
+     * Updates an item's state in `state.itemStates[]`.
+     * @param  {number} i — Item index
+     * @param  {any} i — Item's new state
      */
 
   }, {
-    key: "updateItems",
+    key: "onItemStateChange",
+    value: function onItemStateChange(i, newItemState) {
+      this.hasToBeStarted();
 
-    /**
-     * @deprecated
-     * `.updateItems()` has been renamed to `.setItems()`.
-     */
-    value: 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.
@@ -1013,102 +252,8 @@ 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$getState4 = this.getState(),
-          previousItems = _this$getState4.items;
-
-      var _this$getState5 = this.getState(),
-          itemStates = _this$getState5.itemStates,
-          itemHeights = _this$getState5.itemHeights;
-
-      log('~ Update items ~');
-      var layout;
-      var itemsDiff = this.getItemsDiff(previousItems, newItems); // If it's an "incremental" update.
-
-      if (itemsDiff && !this.layoutResetPending) {
-        var _this$getState6 = this.getState(),
-            firstShownItemIndex = _this$getState6.firstShownItemIndex,
-            lastShownItemIndex = _this$getState6.lastShownItemIndex,
-            beforeItemsHeight = _this$getState6.beforeItemsHeight,
-            afterItemsHeight = _this$getState6.afterItemsHeight;
-
-        layout = {
-          firstShownItemIndex: firstShownItemIndex,
-          lastShownItemIndex: lastShownItemIndex,
-          beforeItemsHeight: beforeItemsHeight,
-          afterItemsHeight: afterItemsHeight
-        };
-        var prependedItemsCount = itemsDiff.prependedItemsCount,
-            appendedItemsCount = itemsDiff.appendedItemsCount;
-
-        if (prependedItemsCount > 0) {
-          log('Prepend', prependedItemsCount, 'items');
-          itemHeights = new Array(prependedItemsCount).concat(itemHeights);
-
-          if (itemStates) {
-            itemStates = new Array(prependedItemsCount).concat(itemStates);
-          }
-        }
-
-        if (appendedItemsCount > 0) {
-          log('Append', appendedItemsCount, 'items');
-          itemHeights = itemHeights.concat(new Array(appendedItemsCount));
-
-          if (itemStates) {
-            itemStates = itemStates.concat(new Array(appendedItemsCount));
-          }
-        }
-
-        this.layout.updateLayoutForItemsDiff(layout, itemsDiff, {
-          itemsCount: newItems.length
-        });
-
-        if (prependedItemsCount > 0) {
-          // `preserveScrollPosition` option name is deprecated,
-          // use `preserveScrollPositionOnPrependItems` instead.
-          if (options.preserveScrollPositionOnPrependItems || options.preserveScrollPosition) {
-            if (this.getState().firstShownItemIndex === 0) {
-              this.restoreScroll.captureScroll({
-                previousItems: previousItems,
-                newItems: newItems,
-                prependedItemsCount: prependedItemsCount
-              });
-              this.layout.showItemsFromTheStart(layout);
-            }
-          }
-        }
-      } 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);
-        itemHeights = new Array(newItems.length);
-        itemStates = new Array(newItems.length);
-        layout = this.getInitialLayoutValues({
-          itemsCount: newItems.length
-        });
-      }
-
-      log('~ Update state ~');
-      log('First shown item index', layout.firstShownItemIndex);
-      log('Last shown item index', layout.lastShownItemIndex);
-      log('Before items height', layout.beforeItemsHeight);
-      log('After items height (actual or estimated)', layout.afterItemsHeight); // Optionally preload items to be rendered.
-
-      this.onBeforeShowItems(newItems, itemHeights, layout.firstShownItemIndex, layout.lastShownItemIndex); // `this.newItemsPending` will be cleared in `didUpdateState()`.
-
-      this.newItemsPending = newItems; // Update state.
-
-      this.setState(_objectSpread({}, layout, {
-        items: newItems,
-        itemStates: itemStates,
-        itemHeights: itemHeights
-      }));
-    }
-  }, {
-    key: "getItemsDiff",
-    value: function getItemsDiff(previousItems, newItems) {
-      return _getItemsDiff(previousItems, newItems, this.isItemEqual);
+      this.hasToBeStarted();
+      return this._setItems(newItems, options);
     }
   }]);