Skip to content

DataVis rerenders entire grid when selecting a cell #33

Description

@lattln
Image

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

  1. Open https://mieweb.github.io/datavis/#wide
  2. Enable React Scan or React DevTools render highlighting.
  3. Click any data cell repeatedly.
  4. 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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions