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'});When to reach for it
Section titled “When to reach for it”| Symptom | Try |
|---|---|
| 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. |
What each mode skips
Section titled “What each mode skips”'cells'— wraps each data cell inReact.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 inReact.memo, keyed on row identity. Same principle at row granularity.
Tradeoffs
Section titled “Tradeoffs”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:
- Start with no
memoMode. - If you have a perf problem, add virtualization first (
enableRowVirtualization,enableColumnVirtualization). - If live column resizing is the remaining hot spot, add
memoMode: 'cells'.
See also
Section titled “See also”- Table options —
memoMode,enableRowVirtualization,enableColumnVirtualization