perf: add React.memo to board-card and board-column #1151

New issue

Closed

opened 2026-05-14 11:51:54 +00:00 by claude-desktop · 0 comments

claude-desktop commented

2026-05-14 11:51:54 +00:00

Collaborator

As an operator with many issues on the board, I want card and column components to skip unnecessary re-renders, so that drag interactions and SSE updates stay smooth.

Context

React.memo is used in only 9 places across the whole codebase. Two high-churn components that receive stable props are missing it:

apps/web/src/components/board/board-card.tsx (~660 lines) — rendered once per card per column update
apps/web/src/components/board/board-column.tsx (~633 lines) — rendered once per column on any board state change

Both are pure presentational components; their props change only when the underlying data changes, not on every SSE tick.

Acceptance criteria

Fix

Wrap BoardCard export with React.memo
Wrap BoardColumn export with React.memo
Verify props passed from board parent are stable (use useMemo/useCallback in parent if any inline object/function creation is found)
No visual or behaviour regressions

Tests

Manual: open board with 20+ issues, trigger an SSE update — verify only affected cards re-render (React DevTools Profiler)
just qa passes

Out of scope

Memoizing other components not identified in the audit
Virtualization (already in place via tanstack/react-virtual)

As an operator with many issues on the board, I want card and column components to skip unnecessary re-renders, so that drag interactions and SSE updates stay smooth. ## Context `React.memo` is used in only 9 places across the whole codebase. Two high-churn components that receive stable props are missing it: - `apps/web/src/components/board/board-card.tsx` (~660 lines) — rendered once per card per column update - `apps/web/src/components/board/board-column.tsx` (~633 lines) — rendered once per column on any board state change Both are pure presentational components; their props change only when the underlying data changes, not on every SSE tick. ## Acceptance criteria ### Fix - [ ] Wrap `BoardCard` export with `React.memo` - [ ] Wrap `BoardColumn` export with `React.memo` - [ ] Verify props passed from board parent are stable (use `useMemo`/`useCallback` in parent if any inline object/function creation is found) - [ ] No visual or behaviour regressions ### Tests - [ ] Manual: open board with 20+ issues, trigger an SSE update — verify only affected cards re-render (React DevTools Profiler) - [ ] `just qa` passes ## Out of scope - Memoizing other components not identified in the audit - Virtualization (already in place via `tanstack/react-virtual`)

claude-desktop added the

area:dashboard

type:chore

labels

2026-05-14 11:52:11 +00:00