react-component-performance

# React Component Performance ## Overview Identify render hotspots, isolate expensive updates, and apply targeted optimizations without changing UI behavior. ## When to Use - When the user asks to profile or improve a slow React component. - When you need to reduce re-renders, list lag, or expensive render work in React UI. ## Workflow 1. Reproduce or describe the slowdown. 2. Identify what triggers re-renders (state updates, props churn, effects). 3. Isolate fast-changing state from heavy subtrees. 4. Stabilize props and handlers; memoize where it pays off. 5. Reduce expensive work (computation, DOM size, list length). 6. **Validate**: open React DevTools Profiler → record the interaction → inspect the Flamegraph for components rendering longer than ~16 ms → compare against a pre-optimization baseline recording. ## Checklist - Measure: use React DevTools Profiler or log renders; capture baseline. - Find churn: identify state updated on a timer, scroll, input, or animation. - Split: move ticking state into a child; keep heavy lists static. - Memoize: wrap leaf rows with `memo` only when props are stable. - Stabilize props: use `useCallback`/`useMemo` for handlers and derived values. - Avoid derived work in render: precompute, or compute inside memoized helpers. - Control list size: window/virtualize long lists; avoid rendering hidden items. - Keys: ensure stable keys; avoid index when order can change. - Effects: verify dependency arrays; avoid effects that re-run on ...