[OPTIMIZATION] People Page - List Rendering & Virtualization - src/pages/People.tsx #58

New issue

Closed

opened 2026-06-06 20:44:40 +00:00 by Mark · 0 comments

Mark commented

2026-06-06 20:44:40 +00:00

Owner

Critical Issues (2)

ListRow/GridCard not memoized - every parent re-render re-renders ALL items
- Fix: React.memo + stable props via useCallback
- Impact: 10-50x faster list interactions
Large lists without virtualization - renders all DOM nodes
- Fix: Add @tanstack/react-virtual
- Impact: O(1) DOM nodes, 10-100x faster initial render

High Issues (2)

Tag filter: filter + some + includes = O(n × m × k)
- Fix: Convert filter tags to Set, use some(t => tagSet.has(t))
- Impact: 5-10x faster filtering
people.find() in render loop for selection
- Fix: Pre-build Map with useMemo
- Impact: 10-50x faster selection

Medium Issues (2)

Inline hover handlers defeat memo - new function every render
- Fix: Use CSS :hover or useCallback
Inline style objects on hover - triggers style recalculation
- Fix: CSS transform + transition classes

Low Issues (1)

Duplicate .js + .tsx files - delete .js versions (~2000 lines)

## Critical Issues (2) 1. **ListRow/GridCard not memoized** - every parent re-render re-renders ALL items - Fix: `React.memo` + stable props via `useCallback` - Impact: 10-50x faster list interactions 2. **Large lists without virtualization** - renders all DOM nodes - Fix: Add `@tanstack/react-virtual` - Impact: O(1) DOM nodes, 10-100x faster initial render ## High Issues (2) 3. **Tag filter: `filter + some + includes`** = O(n × m × k) - Fix: Convert filter tags to `Set`, use `some(t => tagSet.has(t))` - Impact: 5-10x faster filtering 4. **`people.find()` in render loop** for selection - Fix: Pre-build `Map` with `useMemo` - Impact: 10-50x faster selection ## Medium Issues (2) 5. **Inline hover handlers defeat memo** - new function every render - Fix: Use CSS `:hover` or `useCallback` 6. **Inline style objects on hover** - triggers style recalculation - Fix: CSS `transform` + `transition` classes ## Low Issues (1) 7. **Duplicate .js + .tsx files** - delete .js versions (~2000 lines)