react-performancelisted
Install: claude install-skill mblauberg/provenant
# React performance
Improve measured user or server outcomes without trading away correctness,
security, accessibility or maintainability. It covers shared React behaviour,
Next.js server/rendering boundaries and Vite build/runtime performance. Confirm
installed versions, router, runtime and React Compiler status before using
version-sensitive APIs.
## Priority order
1. **Measure the real path.** Reproduce in a production build. Use field Core
Web Vitals where available, then browser traces, React DevTools Profiler,
bundle analysis and server timings. Do not optimise from render counts alone.
2. **Remove waits and bytes.** Start independent work together, move fetches to
route/server boundaries, stream deliberate Suspense regions, shrink client
boundaries, and lazy-load code that is not needed for the initial path.
3. **Fix ownership.** Keep request data isolated, authenticate server actions,
minimise serialised props, and distinguish request-local deduplication from
persistent or cross-request caching.
4. **Reduce rendering work.** Remove state derived through Effects, narrow
subscriptions, keep transient values out of state, and profile expensive
subtrees. With React Compiler enabled, prefer its automatic memoisation;
retain or add manual `memo`, `useMemo` and `useCallback` only with evidence.
5. **Tune hot code last.** Only retain a micro-optimisation when a trace or
benchmark proves that exact path is material.
## Workflow
- Record basel