[nstepien]

Follow-up to #4222.

Breaking change

RenderRowProps.iterateOverViewportColumnsForRow, which returned an iterator of [column, isCellActive, colSpan] tuples, is replaced by mapViewportColumns, which calls a callback for each cell and returns the results:

// before
iterateOverViewportColumnsForRow(activeCellIdx, { type: 'ROW', row })
  .map(([column, isCellActive, colSpan]) => <Cell … />)
  .toArray();

// after
mapViewportColumns(activeCellIdx, { type: 'ROW', row }, (column, isCellActive, colSpan, index) => (
  <Cell … />
));

This only affects custom row renderers that render their own cells. Row renderers that render <Row {...props} /> keep working.

Why

useViewportColumns created its generators with useCallback(function* …), and DataGrid declared function* iterateOverViewportRowIdx() in its body.

• V8: each generator function gives the generator objects it creates their own hidden class and prototype. So every time a generator was re-created, on every DataGrid render for iterateOverViewportRowIdx, and whenever the column range changed for the column generators, the .map(), .toArray(), and for…of calls on its objects saw a new hidden class. On main, in Chromium, getViewportRows' .map() missed V8's megamorphic cache 473 times in the CommonFeatures vertical scroll, once per render, three sites missed it 228–237 times each in the MillionCells horizontal scroll, and library code deoptimized 4 times with wrong map.
• React Compiler: it doesn't support yield (Handle YieldExpression expressions), so it skipped useViewportColumns, with 11 bail-outs, and DataGrid, with 3.
• Iteration: even module-level generators allocate an iterator result per step, and the iterator helpers that consume them add their own, plus a tuple per cell.

The first commit moved the generators to module scope. The next commits replace them with plain loops, and the iterator with a callback, so building a row's cells allocates nothing per cell besides what the callback returns. The two helpers used in more than one place are in src/utils/viewportUtils.ts, and the others are inlined.

Results

Building a row's cells, with 30 columns and a callback that creates Row's props for each cell, takes per row about 1.0 µs with module-level generators, 0.67 µs with arrays returned as .values(), and 0.16 µs with the callback. In cold code, before V8 optimizes it, the callback takes about 2.5 µs per row, against 6.6 µs with .values().

Sampled allocations in Chromium, on an unminified build of the demo site:

	Module-level generators	This PR
MillionCells horizontal scroll	266.1 MB	228.5 MB
Row grouping	55.9 MB	51.6 MB
CommonFeatures vertical scroll	46.3 MB	43.7 MB

The library's CPU time in the MillionCells horizontal scroll dropped from about 86 ms to 72 ms, as medians of 3 alternating runs against the .values() version. In the CommonFeatures vertical scroll, the difference was within the noise between runs: the library's JavaScript is only a few percent of busy time.

No generators are left, no iterator call site goes megamorphic, and the library's remaining deopts are one-time warm-up ones. useViewportColumns is now compiled by React Compiler, and its two react/memo-dependencies suppressions are gone. DataGrid still isn't compiled: its remaining bail-out is setPosition being read before its declaration is initialized, in useLatestFunc(setPosition).

AGENTS.md now says to avoid generators in rendering code.

Fix: cells hidden by colSpan

After a cell with colSpan N, the generator skipped the next N − 1 columns in its list, but the list has gaps: it only contains the rendered columns. So a cell spanning columns that aren't rendered hid the next rendered columns:

• an active cell before the viewport, which is rendered even outside of the overscan range, hid the first columns of the viewport
• an active cell after the viewport hid end-frozen columns
• the last cell of the overscan range, when spanning past it, hid end-frozen columns

The list is ordered by index, so spanned columns are now skipped by index. The three new tests failed in Chromium before the fix.

Verification

vp run ci passes. A new test renders a row's cells through a custom row renderer with mapViewportColumns.

🤖 Generated with Claude Code

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.58%. Comparing base (e630880) to head (d321e4e).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4225      +/-   ##
==========================================
+ Coverage   98.56%   98.58%   +0.01%     
==========================================
  Files          45       46       +1     
  Lines        1957     1984      +27     
  Branches      728      750      +22     
==========================================
+ Hits         1929     1956      +27     
  Misses         28       28              

Files with missing lines	Coverage Δ
src/DataGrid.tsx	98.88% <100.00%> (ø)
src/GroupedColumnHeaderRow.tsx	100.00% <100.00%> (ø)
src/GroupedRow.tsx	100.00% <100.00%> (ø)
src/HeaderRow.tsx	100.00% <100.00%> (ø)
src/Row.tsx	100.00% <100.00%> (ø)
src/SummaryRow.tsx	100.00% <100.00%> (ø)
src/hooks/useViewportColumns.ts	100.00% <100.00%> (ø)
src/utils/index.ts	90.90% <ø> (ø)
src/utils/viewportUtils.ts	100.00% <100.00%> (ø)

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.