React Optimise

React Optimise Best Practices

Application-level performance optimization guide for React applications. Contains 43 rules across 8 categories, prioritized by impact from critical (React Compiler, bundle optimization) to incremental (memory management).

When to Apply

• Optimizing React application performance or bundle size
• Adopting or troubleshooting React Compiler v1.0
• Splitting bundles and configuring code splitting
• Improving Core Web Vitals (INP, LCP, CLS)
• Profiling render performance and identifying bottlenecks
• Fixing memory leaks in long-lived single-page applications
• Optimizing data fetching patterns and eliminating waterfalls

Rule Categories

Quick Reference

Critical patterns — get these right first:

• Write compiler-friendly components to unlock automatic 2-10x optimization
• Split code at route boundaries to reduce initial bundle by 40-70%
• Eliminate barrel files to enable tree shaking
• Detect and fix silent compiler bailouts

Common mistakes — avoid these anti-patterns:

• Reading refs during render (breaks compiler optimization)
• Importing entire libraries when only using one function
• Not profiling before optimizing (targeting the wrong bottleneck)
• Missing effect cleanup (subscription memory leaks)

Table of Contents

1. React Compiler Mastery — CRITICAL
   • 1.1 Detect and Fix Silent Compiler Bailouts — CRITICAL (prevents losing automatic memoization)
   • 1.2 Isolate Side Effects from Render for Compiler Correctness — CRITICAL (prevents compiler from producing incorrect cached output)
   • 1.3 Remove Manual Memoization After Compiler Adoption — CRITICAL (20-40% code reduction in component files)
   • 1.4 Use Incremental Compiler Adoption with Directives — CRITICAL (enables safe rollout without full codebase migration)
   • 1.5 Use Ref Access Patterns That Enable Compilation — CRITICAL (maintains compiler optimization for ref-using components)
   • 1.6 Write Compiler-Friendly Component Patterns — CRITICAL (2-10x automatic render optimization)
2. Bundle & Loading — CRITICAL
   • 2.1 Configure Dependencies for Effective Tree Shaking — CRITICAL (50-90% dead code elimination in dependencies)
   • 2.2 Eliminate Barrel Files to Enable Tree Shaking — CRITICAL (200-800ms import cost eliminated)
   • 2.3 Enforce Bundle Size Budgets with Analysis Tools — CRITICAL (prevents gradual bundle size regression)
   • 2.4 Prefetch Likely Next Routes on Interaction — CRITICAL (200-1000ms faster perceived navigation)
   • 2.5 Split Code at Route Boundaries with React.lazy — CRITICAL (40-70% reduction in initial bundle size)
   • 2.6 Use Dynamic Imports for Heavy Libraries — CRITICAL (100-500KB removed from critical path)
3. Rendering Optimization — HIGH
   • 3.1 Avoid Inline Object Creation in JSX Props — HIGH (prevents unnecessary child re-renders)
   • 3.2 Debounce Expensive Derived Computations — HIGH (50-200ms saved per keystroke)
   • 3.3 Use CSS Containment to Isolate Layout Recalculation — HIGH (60-90% layout recalc reduction)
   • 3.4 Use Children Pattern to Prevent Parent Re-Renders — HIGH (eliminates re-renders of static subtrees)
   • 3.5 Use Stable Keys for List Rendering Performance — HIGH (O(n) DOM mutations to O(1) moves)
   • 3.6 Virtualize Long Lists with TanStack Virtual — HIGH (O(n) to O(1) DOM nodes)
4. Data Fetching Performance — HIGH
   • 4.1 Abort Stale Requests on Navigation or Re-fetch — HIGH (prevents stale data display)
   • 4.2 Deduplicate Identical In-Flight Requests — HIGH (50-80% fewer network requests)
   • 4.3 Eliminate Sequential Data Fetch Waterfalls — HIGH (2-5x faster page loads)
   • 4.4 Preload Data at Route Level Before Component Mounts — HIGH (200-1000ms eliminated)
   • 4.5 Use Stale-While-Revalidate for Cache Freshness — HIGH (0ms perceived load for returning visitors)
5. Core Web Vitals — MEDIUM-HIGH
   • 5.1 Instrument Real User Monitoring with web-vitals — MEDIUM-HIGH (enables data-driven optimization)
   • 5.2 Optimize Images with Responsive Sizing and Lazy Loading — MEDIUM-HIGH (40-70% bandwidth reduction)
   • 5.3 Optimize Interaction to Next Paint with Yielding — MEDIUM-HIGH (INP from 500ms+ to under 200ms)
   • 5.4 Optimize Largest Contentful Paint with Priority Loading — MEDIUM-HIGH (200-1000ms LCP improvement)
   • 5.5 Prevent Cumulative Layout Shift with Size Reservations — MEDIUM-HIGH (CLS from 0.25+ to under 0.1)
6. State & Subscription Performance — MEDIUM-HIGH
   • 6.1 Derive State Instead of Syncing for Zero Extra Renders — MEDIUM-HIGH (eliminates double-render cycle)
   • 6.2 Separate Server State from Client State Management — MEDIUM-HIGH (reduces state management code by 40%)
   • 6.3 Split Contexts to Isolate High-Frequency Updates — MEDIUM-HIGH (5-50x fewer re-renders)
   • 6.4 Use Atomic State for Independent Reactive Values — MEDIUM-HIGH (3-10x fewer unnecessary re-renders)
   • 6.5 Use Selector-Based Subscriptions for Granular Updates — MEDIUM-HIGH (reduces re-renders to only affected components)
7. Profiling & Measurement — MEDIUM
   • 7.1 Benchmark with Production Builds Only — MEDIUM (prevents false positives from dev-mode overhead)
   • 7.2 Enforce Performance Budgets in CI — MEDIUM (catches 90% of perf issues before merge)
   • 7.3 Profile Before Optimizing to Target Real Bottlenecks — MEDIUM (10x more effective optimization effort)
   • 7.4 Read Flame Charts to Identify Hot Render Paths — MEDIUM (identifies exact function causing 80% of render time)
   • 7.5 Use React Performance Tracks for Render Analysis — MEDIUM (pinpoints render bottlenecks in minutes)
8. Memory Management — LOW-MEDIUM
   • 8.1 Avoid Closure-Based Memory Leaks in Event Handlers — LOW-MEDIUM (prevents MB-scale memory retention)
   • 8.2 Cancel Async Operations on Unmount — LOW-MEDIUM (prevents stale updates and memory retention)
   • 8.3 Clean Up Effects to Prevent Subscription Memory Leaks — LOW-MEDIUM (prevents linear memory growth)
   • 8.4 Dispose Heavy Resources in Cleanup Functions — LOW-MEDIUM (prevents 5-50MB per resource retention)
   • 8.5 Use Heap Snapshots to Detect Component Retention — LOW-MEDIUM (identifies 10-100MB memory growth)