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

react-best-practices