Skip to content
Documentation

Performance

FieldValue
TypeAgent Reference
Source~/.copilot/agents/_refs/expert-react-frontend-engineer/performance.md
DescriptionNot specified

Source Content

Performance

For deep audits, invoke the react-perf-auditor skill — Lighthouse, Web Vitals, react-scan render heatmap, bundle analysis, prioritized fix list, and CI bundle-size budgets.

Performance Checklist

  • Use React.lazy() + Suspense for route-level code splitting
  • Set appropriate staleTime in TanStack Query (avoid unnecessary refetches)
  • Use placeholderData: keepPreviousData for paginated queries
  • Use useDeferredValue for expensive renders triggered by fast-changing input
  • Use startTransition for non-critical state updates
  • Virtualize long lists (TanStack Virtual or react-window)
  • Images: lazy loading, WebP/AVIF formats, responsive srcset
  • Bundle analysis: check for accidental large imports
  • Use Zustand selectors to prevent unnecessary re-renders
  • Do NOT reach for React.memo / useMemo / useCallback first — profile before optimizing. React Compiler handles most cases.

React 19 Features to Use

Use these React 19+ features when they add value:

  • use() hook: For reading promises and context in render
  • useActionState: For form submission state management
  • useFormStatus: For submit button pending states
  • useOptimistic: For optimistic UI updates during mutations
  • Ref as prop: Pass ref directly — no forwardRef needed
  • Context without Provider: Render <ThemeContext value={...}> directly
  • Ref callback cleanup: Return cleanup functions from ref callbacks
  • Document metadata: Place <title>, <meta> directly in components
  • useEffectEvent (19.2): Extract non-reactive logic from effects
  • <Activity> (19.2): Preserve state for hidden UI (tabs, routes)

Do NOT use

  • Class components (legacy — use functional components + hooks exclusively)
  • forwardRef (use ref-as-prop instead)
  • Context.Provider (use direct context rendering)
  • Manual React.memo / useMemo / useCallback as a first resort — let React Compiler handle it. Only add manual memoization when profiling shows a measurable issue.