[OPTIMIZATION] PersonDetail - Expensive Render Computations - src/pages/PersonDetail.tsx #57

New issue

Closed

opened 2026-06-06 20:42:55 +00:00 by Mark · 0 comments

Mark commented

2026-06-06 20:42:55 +00:00

Owner

Critical Issues (1)

4 IIFEs with 15+ array passes per render - date nights, conflict/repair, mood trend, intimacy trend
- Fix: useMemo for each section with [interactions] dependency
- Impact: 10-20x faster renders for heavy interactions

High Issues (3)

4 separate .filter() on same array for date night stats
- Fix: Single reduce pass
- Impact: 4x faster stats
28+ people.find(p => p.id === id) linear searches
- Fix: Use peopleMap.get(id) (map already exists in utils)
- Impact: 10-50x faster lookups
Inline array [1,2,3,4,5].map() every render for closeness dots
- Fix: Move to constant outside component

Medium Issues (1)

Duplicate helper functions (initials, avatar colors, closeness labels) - 500 lines duplicated from utils.ts
- Fix: Import from @/lib/utils

Low Issues (1)

60+ inline styles - move to Tailwind/CSS

## Critical Issues (1) 1. **4 IIFEs with 15+ array passes per render** - date nights, conflict/repair, mood trend, intimacy trend - Fix: `useMemo` for each section with `[interactions]` dependency - Impact: 10-20x faster renders for heavy interactions ## High Issues (3) 2. **4 separate `.filter()` on same array** for date night stats - Fix: Single `reduce` pass - Impact: 4x faster stats 3. **28+ `people.find(p => p.id === id)`** linear searches - Fix: Use `peopleMap.get(id)` (map already exists in utils) - Impact: 10-50x faster lookups 4. **Inline array `[1,2,3,4,5].map()`** every render for closeness dots - Fix: Move to constant outside component ## Medium Issues (1) 5. **Duplicate helper functions** (initials, avatar colors, closeness labels) - 500 lines duplicated from utils.ts - Fix: Import from `@/lib/utils` ## Low Issues (1) 6. **60+ inline styles** - move to Tailwind/CSS