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
- Always pass the current data length as rowCount/columnCount and update it with setState when data changes.
- Clamp any scrollToRow/scrollToCell index to `Math.min(index, count - 1)` and `>= 0`.
- Call `recomputeGridSize()` on the Grid after data changes.
- 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
- Always derive rowCount/columnCount from current data length via state
- Clamp scrollToRow/scrollToCell arguments to valid range
- Call recomputeGridSize after data mutations
- Guard against rendering while data is empty/loading
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
- Rendered cell should include style property for positioning.
- Unexpected child type registered; only Grid/MultiGrid childr
- Invalid size returned for cell ${i} of value ${size}
AI-assisted analysis of bvaughn/react-virtualized@c737715486 (2026-08-30).
Data as JSON: /api/errors/96f0e1b42fe6daa8.
Report an issue: GitHub.