CellMeasurerCache should only measure a cell's width or heig

Error message

CellMeasurerCache should only measure a cell's width or height. You have configured CellMeasurerCache to measure both. This will result in poor performance.

What it means

CellMeasurerCache warns when neither `fixedWidth` nor `fixedHeight` is set, meaning it will measure both dimensions of every cell. Measuring both axes requires expensive DOM reads and two-pass layout, which the library flags as a performance problem. It is a dev-mode warning, not a thrown exception.

Source

Thrown at source/CellMeasurer/CellMeasurerCache.js:76

    this._hasFixedHeight = fixedHeight === true;
    this._hasFixedWidth = fixedWidth === true;
    this._minHeight = minHeight || 0;
    this._minWidth = minWidth || 0;
    this._keyMapper = keyMapper || defaultKeyMapper;

    this._defaultHeight = Math.max(
      this._minHeight,
      typeof defaultHeight === 'number' ? defaultHeight : DEFAULT_HEIGHT,
    );
    this._defaultWidth = Math.max(
      this._minWidth,
      typeof defaultWidth === 'number' ? defaultWidth : DEFAULT_WIDTH,
    );

    if (process.env.NODE_ENV !== 'production') {
      if (this._hasFixedHeight === false && this._hasFixedWidth === false) {
        console.warn(
          "CellMeasurerCache should only measure a cell's width or height. " +
            'You have configured CellMeasurerCache to measure both. ' +
            'This will result in poor performance.',
        );
      }

      if (this._hasFixedHeight === false && this._defaultHeight === 0) {
        console.warn(
          'Fixed height CellMeasurerCache should specify a :defaultHeight greater than 0. ' +
            'Failing to do so will lead to unnecessary layout and poor performance.',
        );
      }

      if (this._hasFixedWidth === false && this._defaultWidth === 0) {
        console.warn(
          'Fixed width CellMeasurerCache should specify a :defaultWidth greater than 0. ' +
            'Failing to do so will lead to unnecessary layout and poor performance.',
        );

View on GitHub (pinned to c737715486)

Solutions

Set `fixedHeight: true` when row height varies but width is known (most common: lists/grids with fixed column width).
Set `fixedWidth: true` when width varies but height is fixed.
If both truly vary, accept the warning or restructure content so one dimension is fixed (e.g. fixed width container).
Pass the same cache instance consistently to CellMeasurer and the list/grid.

Example fix

// before
const cache = new CellMeasurerCache();

// after
const cache = new CellMeasurerCache({ fixedWidth: true, defaultHeight: 50 });

Defensive patterns

Strategy: validation

Validate before calling

const cache = new CellMeasurerCache(opts);
if (process.env.NODE_ENV !== 'production' && !opts?.fixedWidth && !opts?.fixedHeight) {
  console.warn('Fix: set fixedWidth or fixedHeight on CellMeasurerCache');
}

Prevention

Always pass fixedWidth or fixedHeight when creating the cache
Centralize cache creation in one factory function with sane defaults
Treat dev warnings as build errors in CI where possible

When it happens

Trigger: Constructing `new CellMeasurerCache()` with no options, or with `{fixedWidth: false, fixedHeight: false}`, while using CellMeasurer/Grid.

Common situations: Copy-pasting a CellMeasurer example without the cache options; dynamic-content cells where developers assume both dimensions must be measured; migrating from another virtualization lib.

Related errors

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