bvaughn/react-virtualized · error · Error

Requested index ${index} is outside of range 0..${this._cell

Error message

Requested index ${index} is outside of range 0..${this._cellCount}

What it means

CellSizeAndPositionManager.getSizeAndPositionOfCell throws when the requested cell index is negative or >= the cell count it knows about. The manager lazily computes cumulative offsets and cannot serve indices outside 0..cellCount. Usually indicates a stale or missing `cellCount` update relative to the indices being requested.

Source

Thrown at source/Grid/utils/CellSizeAndPositionManager.js:95

  getEstimatedCellSize(): number {
    return this._estimatedCellSize;
  }

  getLastMeasuredIndex(): number {
    return this._lastMeasuredIndex;
  }

  getOffsetAdjustment() {
    return 0;
  }

  /**
   * This method returns the size and position for the cell at the specified index.
   * It just-in-time calculates (or used cached values) for cells leading up to the index.
   */
  getSizeAndPositionOfCell(index: number): SizeAndPositionData {
    if (index < 0 || index >= this._cellCount) {
      throw Error(
        `Requested index ${index} is outside of range 0..${this._cellCount}`,
      );
    }

    if (index > this._lastMeasuredIndex) {
      let lastMeasuredCellSizeAndPosition = this.getSizeAndPositionOfLastMeasuredCell();
      let offset =
        lastMeasuredCellSizeAndPosition.offset +
        lastMeasuredCellSizeAndPosition.size;

      for (var i = this._lastMeasuredIndex + 1; i <= index; i++) {
        let size = this._cellSizeGetter({index: i});

        // undefined or NaN probably means a logic error in the size getter.
        // null means we're using CellMeasurer and haven't yet measured a given index.
        if (size === undefined || isNaN(size)) {
          throw Error(`Invalid size returned for cell ${i} of value ${size}`);
        } else if (size === null) {

View on GitHub (pinned to c737715486)

Solutions

  1. Always pass the current data length as rowCount/columnCount and update it with setState when data changes.
  2. Clamp any scrollToRow/scrollToCell index to `Math.min(index, count - 1)` and `>= 0`.
  3. Call `recomputeGridSize()` on the Grid after data changes.
  4. Guard render logic to avoid rendering (or scrolling) while data is empty/loading.

Example fix

// before
list.scrollToRow(selectedIndex);

// after
const count = props.rowCount;
if (count > 0) {
  list.scrollToRow(Math.max(0, Math.min(selectedIndex, count - 1)));
}
Defensive patterns

Strategy: validation

Validate before calling

const safeIndex = (i, count) => (count > 0 ? Math.max(0, Math.min(i, count - 1)) : 0);
if (index < 0 || index >= rowCount) return; // skip scroll/render call

Type guard

const inRange = (i, count) => Number.isInteger(i) && i >= 0 && i < count;

Try / catch

try { grid.scrollToCell({rowIndex, columnIndex}) } catch (e) { if (String(e.message).includes('outside of range')) { grid.recomputeGridSize(); } else { throw e; } }

Prevention

When it happens

Trigger: Rendering with an old `rowCount`/`columnCount` while data shrinks; calling `scrollToRow`/`scrollToCell` with an index >= count; Grid internals requesting cells after data changed without `recomputeGridSize`; negative index from a size getter or overscan math on empty lists.

Common situations: Async data reload shrinking the dataset while scroll position references old indices; off-by-one in scrollToRow; rendering a Grid with rowCount 0 but a pending scroll offset; setState race during unmount.

Related errors


AI-assisted analysis of bvaughn/react-virtualized@c737715486 (2026-08-30). Data as JSON: /api/errors/96f0e1b42fe6daa8. Report an issue: GitHub.