Skip to content

Memoize components

shadstack-table subscribes each internal component to exactly the state it renders. A state write re-renders only its subscribers: hovering a row during a drag re-renders that row alone, entering cell editing re-renders that cell alone, a page flip re-renders the body but not a single header cell, and interaction cost does not grow with table size. You do not need to configure anything to get this — it is the default rendering model.

memoMode remains for the cases granular subscriptions cannot help with: renders that legitimately cascade from the top of the table. The main one is live column resizing — every resize tick updates the table-level column-size CSS variables, which re-renders the <table> element and, without memoization, everything inside it. (The body is additionally frozen automatically while a resize drag is in flight, regardless of memoMode.)

useShadStackTable({
columns,
data,
memoMode: 'cells', // 'cells' | 'rows'
});
SymptomTry
Live column resizing feels slow on a wide or dense table.memoMode: 'cells'
Frequent data or option identity changes repaint the whole body.memoMode: 'rows'
Hover / selection / editing / pagination feels slow.Neither — these are already granular by default. If they feel slow, add virtualization.
  • 'cells' — wraps each data cell in React.memo, keyed on cell identity. A memoized cell skips parent-driven re-renders but still updates through its own state subscription.
  • 'rows' — wraps each row in React.memo, keyed on row identity. Same principle at row granularity.

A memoized component skips parent-driven renders, so anything it derives from options (not state) can go stale until its identity key changes — the classic example is a changed cell renderer that doesn’t repaint until the row model rebuilds. State-driven updates are unaffected, because they arrive through subscriptions rather than through the parent.

The general progression:

  1. Start with no memoMode.
  2. If you have a perf problem, add virtualization first (enableRowVirtualization, enableColumnVirtualization).
  3. If live column resizing is the remaining hot spot, add memoMode: 'cells'.
  • Table optionsmemoMode, enableRowVirtualization, enableColumnVirtualization