← ClaudeAtlas

react-performancelisted

Use for measuring or improving React rendering, hydration, bundles, waterfalls, Server Components, or Core Web Vitals. Not for general UI design, TanStack cache semantics, or Vite config; use the matching specialist.
mblauberg/provenant · ★ 2 · Web & Frontend · score 68
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