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)

1. 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)

1. 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)

1. 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)

1. 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)

1. 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)

1. 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)