react-performance

React Performance

Overview

Dedicated performance optimization skill for React applications. Covers the full spectrum from build-time optimizations (code splitting, barrel file avoidance) through runtime techniques (memoization, transitions, content-visibility) to diagnostic tooling (React DevTools Profiler, bundle analyzers).

When to use: Reducing Time to Interactive, shrinking bundle size, eliminating re-renders, profiling slow components, optimizing large lists, lazy loading heavy dependencies, auditing React app performance.

When NOT to use: General React component patterns (use react-patterns skill), framework-specific optimizations like Next.js caching (use framework skill), non-React performance (network, database, CDN).

Quick Reference

Category	Technique	Key Points
Compiler	React Compiler	Automatic memoization at build time; eliminates manual memo/useMemo/useCallback
Memoization	React.memo(Component)	Wrap components receiving stable primitive props from frequently re-rendering parents
Memoization	useMemo(fn, deps)	Expensive computations only: sorting, filtering, Set/Map construction
Memoization	useCallback(fn, deps)	Only when passed to memoized children; use functional setState for stable refs
Splitting	React.lazy(() => import())	Lazy-load heavy components with <Suspense> fallback
Splitting	Preload on intent	Trigger import() on hover/focus for perceived speed
Bundle	Direct imports	Avoid barrel files; import from specific paths to reduce module count
Bundle	Defer third-party	Load analytics, logging after hydration
Re-renders	startTransition	Mark non-urgent updates (search, scroll tracking) as interruptible
Re-renders	Functional setState	setState(prev => ...) eliminates state dependencies from callbacks
Re-renders	Derived state	Subscribe to booleans, not continuous values; compute during render
Re-renders	Defer state reads	Read dynamic state (searchParams) inside callbacks, not at render
Rendering	content-visibility: auto	Skip layout/paint for off-screen items in long lists
Rendering	Hoist static JSX	Extract constant elements outside component functions
Profiling	React DevTools Profiler	Record renders, identify slow components, flamegraph analysis
Profiling	Bundle analyzer	Visualize chunk sizes, find oversized dependencies

Common Mistakes

Mistake	Correct Pattern
Wrapping everything in useMemo/useCallback	Trust React Compiler first; only memoize expensive computations or memoized-child callbacks
Memoizing cheap operations like value * 2	Skip memo for simple primitives; overhead exceeds recomputation cost
Importing from barrel files (lucide-react, @mui/material)	Import directly from specific paths or use optimizePackageImports
Loading analytics/tracking in the initial bundle	Defer with lazy + mounted state to load after hydration
Subscribing to continuous values (window width) for boolean checks	Use useMediaQuery or derived boolean to re-render only on threshold change
Referencing state in useCallback dependency array	Use functional setState setState(prev => ...) for stable callbacks
Using useEffect to derive state from props	Compute derived values during render; effects add an extra render cycle
Creating new object literals as props on every render	Hoist static objects outside component; use useMemo for dynamic objects
Profiling in development mode	Always profile production builds; dev mode includes extra warnings that skew results

Delegation

• Profile and diagnose performance bottlenecks: Use Explore agent to run React DevTools Profiler, analyze bundle composition, and trace re-render cascades
• Apply performance optimizations to existing code: Use Task agent to implement code splitting, add memoization boundaries, and optimize rendering
• Plan performance improvement strategy: Use Plan agent to prioritize optimizations by impact (waterfalls > bundle > re-renders) and create an optimization roadmap

If the react-patterns skill is available, delegate general component architecture and React 19 API questions to it. Otherwise, recommend: npx skills add oakoss/agent-skills --skill react-patterns

References

• Rendering optimization: memo, useMemo, useCallback, compiler, re-render elimination
• Code splitting: React.lazy, Suspense, dynamic imports, bundle optimization
• Profiling and debugging: DevTools, performance measurement, common bottlenecks