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 (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
  2. Server Components — CRITICAL
    • 2.1 Avoid Client-Only Libraries in Server Components — MEDIUM-HIGH
    • 2.2 Enable Streaming with Nested Suspense — MEDIUM-HIGH
    • 2.3 Fetch Data in Server Components — CRITICAL (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
    • 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
    • 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
    • 5.4 Use Lazy Initialization for Expensive Initial State — MEDIUM-HIGH
    • 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
    • 8.2 Prefer Composition Over Props Explosion — LOW-MEDIUM
    • 8.3 Use Key to Reset Component State — LOW-MEDIUM
    • 8.4 Use Render Props for Inversion of Control — LOW-MEDIUM
  1. 并发渲染 — CRITICAL
    • 1.1 避免Suspense回退抖动 — HIGH（防止闪烁，提升用户体验流畅度）
    • 1.2 利用自动批处理减少渲染次数 — HIGH（在大量更新场景下减少渲染次数）
    • 1.3 使用useDeferredValue处理昂贵的派生值 — CRITICAL（避免派生计算过程中出现卡顿）
    • 1.4 使用useTransition实现非阻塞更新 — CRITICAL（在大量更新期间保持UI响应）
    • 1.5 编写支持并发的组件 — MEDIUM-HIGH
  2. Server Components — CRITICAL
    • 2.1 避免在Server Components中使用仅客户端库 — MEDIUM-HIGH
    • 2.2 通过嵌套Suspense启用流式渲染 — MEDIUM-HIGH
    • 2.3 在Server Components中获取数据 — CRITICAL（减少客户端JS代码，避免客户端请求瀑布）
    • 2.4 减少Server/Client边界交互 — CRITICAL（降低序列化开销，减小包体积）
    • 2.5 仅传递可序列化Props给客户端组件 — HIGH（防止运行时错误，确保正确 hydration）
    • 2.6 使用组合模式混合Server与客户端组件 — HIGH（为静态内容保留服务端渲染）
  3. Actions & 表单 — HIGH
    • 3.1 使用Form Actions替代onSubmit — HIGH（渐进式增强，简化代码）
    • 3.2 使用useActionState管理表单状态 — HIGH（声明式表单处理，自动管理pending状态）
    • 3.3 使用useFormStatus管理提交按钮状态 — MEDIUM-HIGH
    • 3.4 使用useOptimistic实现即时UI反馈 — HIGH（即时感知响应，失败时自动回滚）
    • 3.5 通过Actions在服务端验证表单 — MEDIUM（安全验证，统一错误处理）
  4. 数据获取 — HIGH
    • 4.1 使用Promise.all并行获取数据 — MEDIUM-HIGH
    • 4.2 使用cache()实现请求去重 — HIGH（消除每次渲染中的重复请求）
    • 4.3 结合Suspense使用错误边界 — MEDIUM（优雅的错误恢复，隔离故障）
    • 4.4 使用Suspense实现声明式加载状态 — HIGH（代码更简洁，加载UI协调统一）
    • 4.5 使用use() Hook在渲染中处理Promise — HIGH（异步组件代码更简洁，集成Suspense）
  5. 状态管理 — MEDIUM-HIGH
    • 5.1 在渲染期间计算派生值 — MEDIUM（消除同步bug，简化代码）
    • 5.2 拆分Context以避免不必要的重渲染 — MEDIUM（减少因Context变化导致的重渲染）
    • 5.3 使用函数式状态更新处理派生值 — MEDIUM-HIGH
    • 5.4 使用惰性初始化处理昂贵的初始状态 — MEDIUM-HIGH
    • 5.5 使用useReducer处理复杂状态逻辑 — MEDIUM（状态转换更清晰，易于测试）
  6. Memoization & 性能 — MEDIUM
    • 6.1 避免过早Memoization — MEDIUM（Memoization存在开销，先进行性能测量）
    • 6.2 利用React Compiler实现自动Memoization — MEDIUM（自动优化，减少手动代码）
    • 6.3 为昂贵的纯组件使用React.memo — MEDIUM（当props未变化时跳过重渲染）
    • 6.4 使用useCallback保持函数引用稳定 — MEDIUM（避免因引用变化导致子组件重渲染）
    • 6.5 使用useMemo处理昂贵计算 — MEDIUM（重渲染时跳过昂贵的重复计算）
  7. 副作用与事件 — MEDIUM
    • 7.1 始终清理Effect的副作用 — MEDIUM（防止内存泄漏，避免过时回调）
    • 7.2 避免使用Effect处理派生状态和用户事件 — MEDIUM（消除同步bug，简化代码）
    • 7.3 避免在Effect中使用对象和数组依赖 — MEDIUM（防止无限循环，避免不必要的重新执行）
    • 7.4 使用useEffectEvent处理非响应式逻辑 — MEDIUM（分离响应式与非响应式代码）
    • 7.5 使用useSyncExternalStore处理外部订阅 — MEDIUM（正确处理订阅，兼容SSR）
  8. 组件模式 — LOW-MEDIUM
    • 8.1 合理选择受控与非受控组件 — LOW-MEDIUM
    • 8.2 优先使用组合而非Props膨胀 — LOW-MEDIUM
    • 8.3 使用Key重置组件状态 — LOW-MEDIUM
    • 8.4 使用Render Props实现控制反转 — LOW-MEDIUM

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
    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
    技能
  • 关于客户端表单处理，请查看
    react-hook-form
    技能
  • 关于使用TanStack Query进行数据缓存，请查看
    tanstack-query
    技能