[OPTIMIZATION] LogInteraction & AddPersonDrawer - Layout Thrashing Animations #59

New issue

Closed

opened 2026-06-06 20:45:21 +00:00 by Mark · 0 comments

Mark commented

2026-06-06 20:45:21 +00:00

Owner

src/pages/LogInteraction.tsx - Critical (1), High (2), Medium (1), Low (1)

Critical:

height: "auto" animation triggers 60 layout passes/sec
- Fix: Use max-height or CSS transform: scaleY() / clip-path

High:
2. form.personIds.includes() ×5 per person in render loop

Fix: Convert to Set + useMemo

people.find() in map() loop for person selection
- Fix: Pre-build peopleMap

Medium:
4. useEffect with filter/sort on every dep - move to useMemo

Low:
5. FileReader missing onerror handler

src/pages/people/AddPersonDrawer.tsx - Critical (1), High (1)

Critical:

height: "auto" animation (2 locations) - same layout thrashing

High:
2. Object useState({ contact: false, dates: false }) causes full re-render on any field change

Fix: Split into separate useState calls

## src/pages/LogInteraction.tsx - Critical (1), High (2), Medium (1), Low (1) **Critical**: 1. `height: "auto"` animation triggers 60 layout passes/sec - Fix: Use `max-height` or CSS `transform: scaleY()` / `clip-path` **High**: 2. `form.personIds.includes()` ×5 per person in render loop - Fix: Convert to `Set` + `useMemo` 3. `people.find()` in `map()` loop for person selection - Fix: Pre-build `peopleMap` **Medium**: 4. `useEffect` with filter/sort on every dep - move to `useMemo` **Low**: 5. `FileReader` missing `onerror` handler --- ## src/pages/people/AddPersonDrawer.tsx - Critical (1), High (1) **Critical**: 1. `height: "auto"` animation (2 locations) - same layout thrashing **High**: 2. Object `useState({ contact: false, dates: false })` causes full re-render on any field change - Fix: Split into separate `useState` calls