react-optimise（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) - 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)

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

References

1. https://react.dev
2. https://react.dev/blog/2025/10/07/react-compiler-1
3. https://web.dev/articles/vitals
4. https://tanstack.com/virtual
5. https://developer.chrome.com/docs/devtools/performance

Related Skills

• For React 19 API best practices, see react skill
• For Next.js App Router optimization, see nextjs-16-app-router skill
• For client-side form handling, see react-hook-form skill