Back to Details

react

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

React 19 Best Practices

React 19 最佳实践

Comprehensive performance optimization guide for React 19 applications. Contains 40 rules across 8 categories, prioritized by impact from critical (concurrent rendering, server components) to incremental (component patterns).
针对React 19应用的全面性能优化指南。包含8个分类下的40条规则，按影响优先级排序，从关键级（并发渲染、Server Components）到渐进级（组件模式）。

Table of Contents

目录

  1. Concurrent Rendering — CRITICAL
    • 1.1 Avoid Suspense Fallback Thrashing — HIGH (prevents flickering, smoother UX)
    • 1.2 Leverage Automatic Batching for Fewer Renders — HIGH (32% fewer renders in heavy updates)
    • 1.3 Use useDeferredValue for Derived Expensive Values — CRITICAL (prevents jank in derived computations)
    • 1.4 Use useTransition for Non-Blocking Updates — CRITICAL (keeps UI responsive during heavy updates)
    • 1.5 Write Concurrent-Safe Components — MEDIUM-HIGH (prevents bugs in concurrent rendering)
  2. Server Components — CRITICAL
    • 2.1 Avoid Client-Only Libraries in Server Components — MEDIUM-HIGH (prevents build errors, correct component placement)
    • 2.2 Enable Streaming with Nested Suspense — MEDIUM-HIGH (progressive loading, faster TTFB)
    • 2.3 Fetch Data in Server Components — CRITICAL (38% less client JS, no client waterfalls)
    • 2.4 Minimize Server/Client Boundary Crossings — CRITICAL (reduces serialization overhead, smaller bundles)
    • 2.5 Pass Only Serializable Props to Client Components — HIGH (prevents runtime errors, ensures correct hydration)
    • 2.6 Use Composition to Mix Server and Client Components — HIGH (maintains server rendering for static content)
  3. Actions & Forms — HIGH
    • 3.1 Use Form Actions Instead of onSubmit — HIGH (progressive enhancement, simpler code)
    • 3.2 Use useActionState for Form State Management — HIGH (declarative form handling, automatic pending states)
    • 3.3 Use useFormStatus for Submit Button State — MEDIUM-HIGH (proper loading indicators, prevents double submission)
    • 3.4 Use useOptimistic for Instant UI Feedback — HIGH (instant perceived response, auto-rollback on failure)
    • 3.5 Validate Forms on Server with Actions — MEDIUM (secure validation, consistent error handling)
  4. Data Fetching — HIGH
    • 4.1 Fetch Data in Parallel with Promise.all — MEDIUM-HIGH (eliminates waterfalls, 2-5× faster)
    • 4.2 Use cache() for Request Deduplication — HIGH (eliminates duplicate fetches per render)
    • 4.3 Use Error Boundaries with Suspense — MEDIUM (graceful error recovery, isolated failures)
    • 4.4 Use Suspense for Declarative Loading States — HIGH (cleaner code, coordinated loading UI)
    • 4.5 Use the use() Hook for Promises in Render — HIGH (cleaner async component code, Suspense integration)
  5. State Management — MEDIUM-HIGH
    • 5.1 Calculate Derived Values During Render — MEDIUM (eliminates sync bugs, simpler code)
    • 5.2 Split Context to Prevent Unnecessary Re-renders — MEDIUM (reduces re-renders from context changes)
    • 5.3 Use Functional State Updates for Derived Values — MEDIUM-HIGH (prevents stale closures, stable callbacks)
    • 5.4 Use Lazy Initialization for Expensive Initial State — MEDIUM-HIGH (prevents expensive computation on every render)
    • 5.5 Use useReducer for Complex State Logic — MEDIUM (clearer state transitions, easier testing)
  6. Memoization & Performance — MEDIUM
    • 6.1 Avoid Premature Memoization — MEDIUM (memoization has overhead, measure first)
    • 6.2 Leverage React Compiler for Automatic Memoization — MEDIUM (automatic optimization, less manual code)
    • 6.3 Use React.memo for Expensive Pure Components — MEDIUM (skips re-render when props unchanged)
    • 6.4 Use useCallback for Stable Function References — MEDIUM (prevents child re-renders from reference changes)
    • 6.5 Use useMemo for Expensive Calculations — MEDIUM (skips expensive recalculation on re-renders)
  7. Effects & Events — MEDIUM
    • 7.1 Always Clean Up Effect Side Effects — MEDIUM (prevents memory leaks, stale callbacks)
    • 7.2 Avoid Effects for Derived State and User Events — MEDIUM (eliminates sync bugs, simpler code)
    • 7.3 Avoid Object and Array Dependencies in Effects — MEDIUM (prevents infinite loops, unnecessary re-runs)
    • 7.4 Use useEffectEvent for Non-Reactive Logic — MEDIUM (separates reactive from non-reactive code)
    • 7.5 Use useSyncExternalStore for External Subscriptions — MEDIUM (correct subscription handling, SSR compatible)
  8. Component Patterns — LOW-MEDIUM
    • 8.1 Choose Controlled vs Uncontrolled Appropriately — LOW-MEDIUM (correct data flow, proper form handling)
    • 8.2 Prefer Composition Over Props Explosion — LOW-MEDIUM (more flexible, reusable components)
    • 8.3 Use Key to Reset Component State — LOW-MEDIUM (correct state isolation, proper resets)
    • 8.4 Use Render Props for Inversion of Control — LOW-MEDIUM (flexible rendering, shared logic)
  1. 并发渲染 — 关键级
    • 1.1 避免Suspense回退抖动 — 高优先级（防止闪烁，提升用户体验流畅度）
    • 1.2 利用自动批处理减少重渲染次数 — 高优先级（在大量更新场景下减少32%的重渲染）
    • 1.3 使用useDeferredValue处理高开销派生值 — 关键级（防止派生计算过程中的卡顿）
    • 1.4 使用useTransition实现非阻塞更新 — 关键级（在大量更新时保持UI响应）
    • 1.5 编写支持并发的组件 — 中高优先级（避免并发渲染中的bug）
  2. Server Components — 关键级
    • 2.1 避免在Server Components中使用仅客户端库 — 中高优先级（防止构建错误，确保组件放置正确）
    • 2.2 通过嵌套Suspense启用流式传输 — 中高优先级（渐进式加载，更快的首字节时间TTFB）
    • 2.3 在Server Components中获取数据 — 关键级（减少38%的客户端JS，消除客户端请求瀑布）
    • 2.4 减少Server/客户端边界的跨跃次数 — 关键级（减少序列化开销，缩小包体积）
    • 2.5 仅向客户端组件传递可序列化的Props — 高优先级（防止运行时错误，确保正确的 hydration）
    • 2.6 使用组合模式混合Server和客户端组件 — 高优先级（保持静态内容的服务端渲染）
  3. Actions与表单 — 高优先级
    • 3.1 使用Form Actions替代onSubmit — 高优先级（渐进式增强，代码更简洁）
    • 3.2 使用useActionState管理表单状态 — 高优先级（声明式表单处理，自动处理pending状态）
    • 3.3 使用useFormStatus管理提交按钮状态 — 中高优先级（正确的加载指示器，防止重复提交）
    • 3.4 使用useOptimistic实现即时UI反馈 — 高优先级（即时感知响应，失败时自动回滚）
    • 3.5 通过Actions在服务端验证表单 — 中优先级（安全的验证，一致的错误处理）
  4. 数据获取 — 高优先级
    • 4.1 使用Promise.all并行获取数据 — 中高优先级（消除请求瀑布，速度提升2-5倍）
    • 4.2 使用cache()实现请求去重 — 高优先级（消除每次渲染中的重复请求）
    • 4.3 结合Suspense使用错误边界 — 中优先级（优雅的错误恢复，隔离故障）
    • 4.4 使用Suspense实现声明式加载状态 — 高优先级（代码更简洁，协调一致的加载UI）
    • 4.5 在渲染中使用use() Hook处理Promise — 高优先级（更简洁的异步组件代码，集成Suspense）
  5. 状态管理 — 中高优先级
    • 5.1 在渲染期间计算派生值 — 中优先级（消除同步bug，代码更简洁）
    • 5.2 拆分Context以避免不必要的重渲染 — 中优先级（减少Context变化导致的重渲染）
    • 5.3 使用函数式状态更新处理派生值 — 中高优先级（避免过时闭包，回调更稳定）
    • 5.4 对开销大的初始状态使用惰性初始化 — 中高优先级（避免每次渲染时的高开销计算）
    • 5.5 使用useReducer处理复杂状态逻辑 — 中优先级（状态转换更清晰，更易于测试）
  6. 记忆化与性能 — 中优先级
    • 6.1 避免过早的记忆化 — 中优先级（记忆化存在开销，先进行性能测量）
    • 6.2 利用React Compiler实现自动记忆化 — 中优先级（自动优化，减少手动代码）
    • 6.3 为开销大的纯组件使用React.memo — 中优先级（Props未变化时跳过重渲染）
    • 6.4 使用useCallback保持函数引用稳定 — 中优先级（避免因引用变化导致子组件重渲染）
    • 6.5 使用useMemo处理高开销计算 — 中优先级（重渲染时跳过高开销的重新计算）
  7. Effects与事件 — 中优先级
    • 7.1 始终清理Effect的副作用 — 中优先级（防止内存泄漏，避免过时回调）
    • 7.2 避免为派生状态和用户事件使用Effects — 中优先级（消除同步bug，代码更简洁）
    • 7.3 避免在Effects中使用对象和数组依赖 — 中优先级（防止无限循环，避免不必要的重新执行）
    • 7.4 使用useEffectEvent处理非响应式逻辑 — 中优先级（分离响应式与非响应式代码）
    • 7.5 使用useSyncExternalStore处理外部订阅 — 中优先级（正确的订阅处理，支持SSR）
  8. 组件模式 — 低-中优先级
    • 8.1 合理选择受控与非受控组件 — 低-中优先级（正确的数据流，合适的表单处理）
    • 8.2 优先使用组合而非Props爆炸 — 低-中优先级（组件更灵活，可复用性更高）
    • 8.3 使用Key重置组件状态 — 低-中优先级（正确的状态隔离，合适的重置操作）
    • 8.4 使用Render Props实现控制反转 — 低-中优先级（渲染更灵活，共享逻辑）

References

参考文献

  1. https://react.dev
  2. https://react.dev/blog/2024/12/05/react-19
  3. https://react.dev/blog/2025/10/01/react-19-2
  4. https://react.dev/learn/you-might-not-need-an-effect
  5. https://github.com/facebook/react
  1. https://react.dev
  2. https://react.dev/blog/2024/12/05/react-19
  3. https://react.dev/blog/2025/10/01/react-19-2
  4. https://react.dev/learn/you-might-not-need-an-effect
  5. https://github.com/facebook/react

Related Skills

相关技能

  • For Next.js 16 App Router, see 
    nextjs-16-app-router
    skill
  • For client-side form handling, see 
    react-hook-form
    skill
  • For data caching with TanStack Query, see 
    tanstack-query
    skill
  • 如需了解Next.js 16 App Router，请查看
    nextjs-16-app-router
    技能
  • 如需客户端表单处理，请查看
    react-hook-form
    技能
  • 如需使用TanStack Query进行数据缓存，请查看
    tanstack-query
    技能