React Best Practices - Performance Optimization
Comprehensive performance optimization guide for React and Next.js applications with 40+ rules organized by impact level. Designed to help developers eliminate performance bottlenecks and follow best practices.
When to use this skill
Use React Best Practices when:
- Optimizing React or Next.js application performance
- Reviewing code for performance improvements
- Refactoring existing components for better performance
- Implementing new features with performance in mind
- Debugging slow rendering or loading issues
- Reducing bundle size
- Eliminating request waterfalls
Key areas covered:
- Eliminating Waterfalls (CRITICAL): Prevent sequential async operations
- Bundle Size Optimization (CRITICAL): Reduce initial JavaScript payload
- Server-Side Performance (HIGH): Optimize RSC and data fetching
- Client-Side Data Fetching (MEDIUM-HIGH): Implement efficient caching
- Re-render Optimization (MEDIUM): Minimize unnecessary re-renders
- Rendering Performance (MEDIUM): Optimize browser rendering
- JavaScript Performance (LOW-MEDIUM): Micro-optimizations for hot paths
- Advanced Patterns (LOW): Specialized techniques for edge cases
Quick reference
Critical priorities
- Defer await until needed - Move awaits into branches where they're used
- Use Promise.all() - Parallelize independent async operations
- Avoid barrel imports - Import directly from source files
- Dynamic imports - Lazy-load heavy components
- Strategic Suspense - Stream content while showing layout
Common patterns
Parallel data fetching:
const [user, posts, comments] = await Promise.all([
fetchUser(),
fetchPosts(),
fetchComments()
])
Direct imports:
// ❌ Loads entire library
import { Check } from 'lucide-react'
// ✅ Loads only what you need
import Check from 'lucide-react/dist/esm/icons/check'
Dynamic components:
import dynamic from 'next/dynamic'
const MonacoEditor = dynamic(
() => import('./monaco-editor'),
{ ssr: false }
)
Using the guidelines
The complete performance guidelines are available in the references folder:
- react-performance-guidelines.md: Complete guide with all 40+ rules, code examples, and impact analysis
Each rule includes:
- Incorrect/correct code comparisons
- Specific impact metrics
- When to apply the optimization
- Real-world examples
Categories overview
1. Eliminating Waterfalls (CRITICAL)
Waterfalls are the #1 performance killer. Each sequential await adds full network latency.
- Defer await until needed
- Dependency-based parallelization
- Prevent waterfall chains in API routes
- Promise.all() for independent operations
- Strategic Suspense boundaries
2. Bundle Size Optimization (CRITICAL)
Reducing initial bundle size improves Time to Interactive and Largest Contentful Paint.
- Avoid barrel file imports
- Conditional module loading
- Defer non-critical third-party libraries
- Dynamic imports for heavy components
- Preload based on user intent
3. Server-Side Performance (HIGH)
Optimize server-side rendering and data fetching.
- Cross-request LRU caching
- Minimize serialization at RSC boundaries
- Parallel data fetching with component composition
- Per-request deduplication with React.cache()
4. Client-Side Data Fetching (MEDIUM-HIGH)
Automatic deduplication and efficient data fetching patterns.
- Deduplicate global event listeners
- Use SWR for automatic deduplication
5. Re-render Optimization (MEDIUM)
Reduce unnecessary re-renders to minimize wasted computation.
- Defer state reads to usage point
- Extract to memoized components
- Narrow effect dependencies
- Subscribe to derived state
- Use lazy state initialization
- Use transitions for non-urgent updates
6. Rendering Performance (MEDIUM)
Optimize the browser rendering process.
- Animate SVG wrapper instead of SVG element
- CSS content-visibility for long lists
- Hoist static JSX elements
- Optimize SVG precision
- Prevent hydration mismatch without flickering
- Use Activity component for show/hide
- Use explicit conditional rendering
7. JavaScript Performance (LOW-MEDIUM)
Micro-optimizations for hot paths.
- Batch DOM CSS changes
- Build index maps for repeated lookups
- Cache property access in loops
- Cache repeated function calls
- Cache storage API calls
- Combine multiple array iterations
- Early length check for array comparisons
- Early return from functions
- Hoist RegExp creation
- Use loop for min/max instead of sort
- Use Set/Map for O(1) lookups
- Use toSorted() instead of sort()
8. Advanced Patterns (LOW)
Specialized techniques for edge cases.
- Store event handlers in refs
- useLatest for stable callback refs
Implementation approach
When optimizing a React application:
- Profile first: Use React DevTools Profiler and browser performance tools to identify bottlenecks
- Focus on critical paths: Start with eliminating waterfalls and reducing bundle size
- Measure impact: Verify improvements with metrics (LCP, TTI, FID)
- Apply incrementally: Don't over-optimize prematurely
- Test thoroughly: Ensure optimizations don't break functionality
Key metrics to track
- Time to Interactive (TTI): When page becomes fully interactive
- Largest Contentful Paint (LCP): When main content is visible
- First Input Delay (FID): Responsiveness to user interactions
- Cumulative Layout Shift (CLS): Visual stability
- Bundle size: Initial JavaScript payload
- Server response time: TTFB for server-rendered content
Common pitfalls to avoid
❌ Don't:
- Use barrel imports from large libraries
- Block parallel operations with sequential awaits
- Re-render entire trees when only part needs updating
- Load analytics/tracking in the critical path
- Mutate arrays with .sort() instead of .toSorted()
- Create RegExp or heavy objects inside render
✅ Do:
- Import directly from source files
- Use Promise.all() for independent operations
- Memoize expensive components
- Lazy-load non-critical code
- Use immutable array methods
- Hoist static objects outside components
Resources
Version history
v0.1.0 (January 2026)
- Initial release from Vercel Engineering
- 40+ performance rules across 8 categories
- Comprehensive code examples and impact analysis
