DataVis rerenders entire grid when selecting a cell
Problem
Clicking a cell or row causes the complete DataVis React component tree to rerender, including all column headers and cells.
Repeatedly clicking the already-selected cell also triggers another full render.
Reproduction
- Open https://mieweb.github.io/datavis/#wide
- Enable React Scan or React DevTools render highlighting.
- Click any data cell repeatedly.
- Observe the rendered components.
Observed Behavior
- All column headers and visible cells are reported as rerendering.
- The wide demo contains 51 headers and 1,020 cells.
- Repeated clicks on the same selected cell continue triggering renders.
- DOM node identity remains stable, so React reconciliation avoids replacing the table elements.
- Five repeated clicks produced only five DOM attribute mutations involving
class, aria-selected, and style.
Expected Behavior
- Selecting a row should rerender only the previously selected and newly selected rows or cells.
- Clicking an already-selected cell should produce no state update or rerender.
- Static headers and unrelated rows should remain memoized.
Impact
Large grids spend unnecessary CPU rendering the full React tree for simple selection changes. This can cause input lag when DataVis is embedded alongside frequently updating form controls.
Suggested Investigation
- Bail out when the requested selection already matches the current selection.
- Keep selection state scoped to affected rows or cells.
- Memoize column headers and cells with stable props.
- Avoid recreating column definitions, render callbacks, or context values during selection updates.
- Split broad grid context so selection changes do not invalidate static consumers.
DataVis rerenders entire grid when selecting a cell
Problem
Clicking a cell or row causes the complete DataVis React component tree to rerender, including all column headers and cells.
Repeatedly clicking the already-selected cell also triggers another full render.
Reproduction
Observed Behavior
class,aria-selected, andstyle.Expected Behavior
Impact
Large grids spend unnecessary CPU rendering the full React tree for simple selection changes. This can cause input lag when DataVis is embedded alongside frequently updating form controls.
Suggested Investigation