Back to Details

react-optimise

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

React Optimise Best Practices

React 优化最佳实践

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).
面向React应用的应用级性能优化指南。包含8个分类下的43条规则，按影响优先级排序，从最高优先级（React Compiler、包体积优化）到增量优化项（内存管理）。

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
  • 优化React应用性能或包体积
  • 接入或排查React Compiler v1.0相关问题
  • 拆分bundle并配置代码分割
  • 提升Core Web Vitals（INP、LCP、CLS）
  • 分析渲染性能并定位瓶颈
  • 修复长生命周期单页应用中的内存泄漏
  • 优化数据请求模式，消除请求瀑布流

Rule Categories

规则分类

CategoryImpactRulesKey Topics
React Compiler MasteryCRITICAL6Compiler-friendly code, bailout detection, incremental adoption
Bundle & LoadingCRITICAL6Route splitting, barrel elimination, dynamic imports, prefetching
Rendering OptimizationHIGH6Virtualization, children pattern, debouncing, CSS containment
Data Fetching PerformanceHIGH5Waterfall elimination, route preloading, SWR, deduplication
Core Web VitalsMEDIUM-HIGH5INP yielding, LCP priority, CLS prevention, image optimization
State & Subscription PerformanceMEDIUM-HIGH5Context splitting, selectors, atomic state, derived state
Profiling & MeasurementMEDIUM5DevTools profiling, flame charts, CI budgets, production builds
Memory ManagementLOW-MEDIUM5Effect cleanup, async cancellation, closure leaks, heap analysis
分类影响等级规则数量核心主题
React Compiler 掌握最高优先级6编译器友好代码、退避检测、渐进式接入
包体积与加载最高优先级6路由拆分、移除barrel文件、动态导入、预加载
渲染优化高优先级6虚拟滚动、children模式、防抖、CSS containment
数据请求性能高优先级5消除请求瀑布流、路由预加载、SWR、请求去重
Core Web Vitals中高优先级5INP让出主线程、LCP优先级优化、CLS预防、图片优化
状态与订阅性能中高优先级5Context拆分、选择器、原子状态、派生状态
性能分析与度量中优先级5DevTools性能分析、火焰图、CI性能预算、生产构建
内存管理中低优先级5Effect清理、异步操作取消、闭包泄漏、堆分析

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)
高优先级模式 —— 请优先落地这些规则：
  • 编写编译器友好的组件，自动获得2-10倍的性能优化
  • 按路由边界拆分代码，减少40-70%的初始包体积
  • 移除barrel文件以支持Tree Shaking
  • 检测并修复静默的编译器退避问题
常见错误 —— 请避免以下反模式：
  • 渲染过程中读取refs（会破坏编译器优化）
  • 只使用库中一个函数时却导入整个库
  • 优化前不做性能分析（导致优化方向错误）
  • 遗漏effect清理函数（导致订阅内存泄漏）

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)
  1. React Compiler 掌握 —— 最高优先级
    • 1.1 检测并修复静默编译器退避问题 —— 最高优先级（避免丢失自动 memoization 能力）
    • 1.2 将副作用与渲染逻辑隔离，保证编译器正确性 —— 最高优先级（避免编译器生成错误的缓存输出）
    • 1.3 接入编译器后移除手动记忆化代码 —— 最高优先级（减少组件文件20-40%的代码量）
    • 1.4 通过指令渐进式接入编译器 —— 最高优先级（无需全量迁移代码即可安全上线）
    • 1.5 使用支持编译的Ref访问模式 —— 最高优先级（保留使用Ref组件的编译器优化能力）
    • 1.6 编写编译器友好的组件模式 —— 最高优先级（自动获得2-10倍的渲染优化）
  2. 包体积与加载 —— 最高优先级
    • 2.1 配置依赖以实现高效Tree Shaking —— 最高优先级（移除依赖中50-90%的死代码）
    • 2.2 移除Barrel文件以支持Tree Shaking —— 最高优先级（减少200-800ms的导入耗时）
    • 2.3 通过分析工具 enforce 包体积预算 —— 最高优先级（避免包体积逐步增长）
    • 2.4 用户交互时预加载大概率会访问的下一个路由 —— 最高优先级（导航感知速度提升200-1000ms）
    • 2.5 通过React.lazy按路由边界拆分代码 —— 最高优先级（减少40-70%的初始包体积）
    • 2.6 重型库使用动态导入 —— 最高优先级（减少关键路径100-500KB的体积）
  3. 渲染优化 —— 高优先级
    • 3.1 避免在JSX Props中创建内联对象 —— 高优先级（避免不必要的子组件重渲染）
    • 3.2 对昂贵的派生计算做防抖处理 —— 高优先级（每次按键减少50-200ms耗时）
    • 3.3 使用CSS Containment隔离布局重计算 —— 高优先级（减少60-90%的布局重计算）
    • 3.4 使用Children模式避免父组件重渲染 —— 高优先级（消除静态子树的重渲染）
    • 3.5 列表渲染使用稳定的Key提升性能 —— 高优先级（DOM操作复杂度从O(n)降低为O(1)移动）
    • 3.6 使用TanStack Virtual对长列表做虚拟滚动 —— 高优先级（DOM节点数量从O(n)降低为O(1)）
  4. 数据请求性能 —— 高优先级
    • 4.1 导航或重新请求时中止过时请求 —— 高优先级（避免展示过时数据）
    • 4.2 对相同的进行中请求做去重处理 —— 高优先级（减少50-80%的网络请求）
    • 4.3 消除串行数据请求瀑布流 —— 高优先级（页面加载速度提升2-5倍）
    • 4.4 组件挂载前在路由层面预加载数据 —— 高优先级（减少200-1000ms耗时）
    • 4.5 使用 stale-while-revalidate 策略保证缓存新鲜度 —— 高优先级（回访用户感知加载耗时为0ms）
  5. Core Web Vitals —— 中高优先级
    • 5.1 通过web-vitals工具埋点采集真实用户监控数据 —— 中高优先级（支持数据驱动的优化）
    • 5.2 通过响应式尺寸和懒加载优化图片 —— 中高优先级（减少40-70%的带宽占用）
    • 5.3 通过让出主线程优化Interaction to Next Paint —— 中高优先级（INP从500ms+降低到200ms以内）
    • 5.4 通过优先级加载优化Largest Contentful Paint —— 中高优先级（LCP提升200-1000ms）
    • 5.5 通过尺寸预留避免Cumulative Layout Shift —— 中高优先级（CLS从0.25+降低到0.1以内）
  6. 状态与订阅性能 —— 中高优先级
    • 6.1 使用派生状态而非同步状态，避免额外重渲染 —— 中高优先级（消除双重渲染周期）
    • 6.2 分离服务端状态和客户端状态管理 —— 中高优先级（减少40%的状态管理代码）
    • 6.3 拆分Context隔离高频更新 —— 中高优先级（减少5-50倍的重渲染）
    • 6.4 独立响应式值使用原子状态 —— 中高优先级（减少3-10倍的不必要重渲染）
    • 6.5 使用基于选择器的订阅实现细粒度更新 —— 中高优先级（仅受影响的组件会重渲染）
  7. 性能分析与度量 —— 中优先级
    • 7.1 仅使用生产构建做性能 benchmark —— 中优先级（避免开发模式开销导致的误判）
    • 7.2 在CI中 enforce 性能预算 —— 中优先级（合入前发现90%的性能问题）
    • 7.3 优化前先做性能分析，定位真实瓶颈 —— 中优先级（优化效率提升10倍）
    • 7.4 阅读火焰图定位渲染热点路径 —— 中优先级（定位导致80%渲染耗时的具体函数）
    • 7.5 使用React性能追踪做渲染分析 —— 中优先级（几分钟内定位渲染瓶颈）
  8. 内存管理 —— 中低优先级
    • 8.1 避免事件处理器中基于闭包的内存泄漏 —— 中低优先级（避免MB级内存占用）
    • 8.2 组件卸载时取消异步操作 —— 中低优先级（避免过时更新和内存占用）
    • 8.3 清理Effect避免订阅内存泄漏 —— 中低优先级（避免内存线性增长）
    • 8.4 在清理函数中释放重型资源 —— 中低优先级（避免每个资源占用5-50MB内存）
    • 8.5 使用堆快照检测组件内存滞留 —— 中低优先级（定位10-100MB的内存增长）

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
  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
  • 如需了解React 19 API最佳实践，请参考
    react
    技能
  • 如需了解Next.js App Router优化，请参考
    nextjs-16-app-router
    技能
  • 如需了解客户端表单处理，请参考
    react-hook-form
    技能