react-performance

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Performance

React性能优化

Overview

概述

Dedicated performance optimization skill for React applications. Covers the full spectrum from build-time optimizations (code splitting, barrel file avoidance) through runtime techniques (memoization, transitions, content-visibility) to diagnostic tooling (React DevTools Profiler, bundle analyzers).

When to use: Reducing Time to Interactive, shrinking bundle size, eliminating re-renders, profiling slow components, optimizing large lists, lazy loading heavy dependencies, auditing React app performance.

When NOT to use: General React component patterns (use

react-patterns

skill), framework-specific optimizations like Next.js caching (use framework skill), non-React performance (network, database, CDN).

专为React应用打造的性能优化技能。涵盖从构建时优化（代码分割、避免桶文件）到运行时技术（记忆化、过渡、content-visibility），再到诊断工具（React DevTools Profiler、包分析器）的全流程方案。

适用场景： 缩短交互时间、缩减包体积、消除重渲染、分析慢速组件、优化长列表、懒加载重型依赖、审计React应用性能。

不适用场景： 通用React组件模式（请使用

react-patterns

技能）、框架特定优化如Next.js缓存（请使用对应框架技能）、非React相关性能问题（网络、数据库、CDN）。

Quick Reference

快速参考

Category	Technique	Key Points
Compiler	React Compiler	Automatic memoization at build time; eliminates manual memo/useMemo/useCallback
Memoization	`React.memo(Component)`	Wrap components receiving stable primitive props from frequently re-rendering parents
Memoization	`useMemo(fn, deps)`	Expensive computations only: sorting, filtering, Set/Map construction
Memoization	`useCallback(fn, deps)`	Only when passed to memoized children; use functional setState for stable refs
Splitting	`React.lazy(() => import())`	Lazy-load heavy components with `<Suspense>` fallback
Splitting	Preload on intent	Trigger `import()` on hover/focus for perceived speed
Bundle	Direct imports	Avoid barrel files; import from specific paths to reduce module count
Bundle	Defer third-party	Load analytics, logging after hydration
Re-renders	`startTransition`	Mark non-urgent updates (search, scroll tracking) as interruptible
Re-renders	Functional setState	`setState(prev => ...)` eliminates state dependencies from callbacks
Re-renders	Derived state	Subscribe to booleans, not continuous values; compute during render
Re-renders	Defer state reads	Read dynamic state (searchParams) inside callbacks, not at render
Rendering	`content-visibility: auto`	Skip layout/paint for off-screen items in long lists
Rendering	Hoist static JSX	Extract constant elements outside component functions
Profiling	React DevTools Profiler	Record renders, identify slow components, flamegraph analysis
Profiling	Bundle analyzer	Visualize chunk sizes, find oversized dependencies

分类	技术手段	核心要点
编译器优化	React Compiler	构建时自动记忆化；无需手动使用memo/useMemo/useCallback
记忆化	`React.memo(Component)`	包裹接收稳定原始类型props、且父组件频繁重渲染的组件
记忆化	`useMemo(fn, deps)`	仅用于昂贵计算：排序、过滤、Set/Map构建等操作
记忆化	`useCallback(fn, deps)`	仅在传递给已记忆化的子组件时使用；使用函数式setState获取稳定引用
代码分割	`React.lazy(() => import())`	搭配 `<Suspense>` 占位符懒加载重型组件
代码分割	意图预加载	在用户悬停/聚焦时触发 `import()` ，提升感知速度
包优化	直接导入	避免桶文件；从具体路径导入以减少模块数量
包优化	延迟加载第三方依赖	在Hydration完成后再加载分析、日志类依赖
重渲染优化	`startTransition`	将非紧急更新（搜索、滚动跟踪）标记为可中断操作
重渲染优化	函数式setState	`setState(prev => ...)` 消除回调中的状态依赖
重渲染优化	派生状态	订阅布尔值而非连续值；在渲染阶段计算派生状态
重渲染优化	延迟读取状态	在回调中读取动态状态（如searchParams），而非在渲染阶段读取
渲染优化	`content-visibility: auto`	跳过长列表中屏幕外元素的布局/绘制过程
渲染优化	提取静态JSX	将常量元素提取到组件函数外部
性能分析	React DevTools Profiler	记录渲染过程、定位慢速组件、火焰图分析
性能分析	包分析器	可视化代码块大小、找出过大的依赖包

Common Mistakes

常见错误

Mistake	Correct Pattern
Wrapping everything in useMemo/useCallback	Trust React Compiler first; only memoize expensive computations or memoized-child callbacks
Memoizing cheap operations like `value * 2`	Skip memo for simple primitives; overhead exceeds recomputation cost
Importing from barrel files ( `lucide-react` , `@mui/material` )	Import directly from specific paths or use `optimizePackageImports`
Loading analytics/tracking in the initial bundle	Defer with lazy + mounted state to load after hydration
Subscribing to continuous values (window width) for boolean checks	Use `useMediaQuery` or derived boolean to re-render only on threshold change
Referencing state in useCallback dependency array	Use functional setState `setState(prev => ...)` for stable callbacks
Using `useEffect` to derive state from props	Compute derived values during render; effects add an extra render cycle
Creating new object literals as props on every render	Hoist static objects outside component; use useMemo for dynamic objects
Profiling in development mode	Always profile production builds; dev mode includes extra warnings that skew results

错误做法	正确方案
给所有操作都包裹useMemo/useCallback	优先信任React Compiler；仅对昂贵计算或传递给已记忆化子组件的回调使用记忆化
对简单操作如 `value * 2` 使用记忆化	简单原始类型操作无需记忆化；开销超过重新计算的成本
从桶文件导入（如 `lucide-react` 、 `@mui/material` ）	从具体路径导入，或使用 `optimizePackageImports` 配置
在初始包中加载分析/跟踪类依赖	结合懒加载和挂载状态，在Hydration完成后再加载
订阅连续值（如窗口宽度）用于布尔判断	使用 `useMediaQuery` 或派生布尔值，仅在阈值变化时触发重渲染
在useCallback依赖数组中引用状态	使用函数式setState `setState(prev => ...)` 获取稳定回调
使用 `useEffect` 从props派生状态	在渲染阶段计算派生值；Effect会额外增加一次渲染周期
每次渲染都创建新的对象字面量作为props	将静态对象提取到组件外部；对动态对象使用useMemo
在开发模式下进行性能分析	始终在生产构建中进行性能分析；开发模式包含额外警告，会影响结果准确性

Delegation

任务委托

Profile and diagnose performance bottlenecks: Use
```
Explore
```
agent to run React DevTools Profiler, analyze bundle composition, and trace re-render cascades
Apply performance optimizations to existing code: Use
```
Task
```
agent to implement code splitting, add memoization boundaries, and optimize rendering
Plan performance improvement strategy: Use
```
Plan
```
agent to prioritize optimizations by impact (waterfalls > bundle > re-renders) and create an optimization roadmap

If the
react-patterns
skill is available, delegate general component architecture and React 19 API questions to it. Otherwise, recommend:
npx skills add oakoss/agent-skills --skill react-patterns

分析并诊断性能瓶颈：使用
```
Explore
```
agent运行React DevTools Profiler、分析包组成、追踪重渲染连锁反应
对现有代码应用性能优化：使用
```
Task
```
agent实现代码分割、添加记忆化边界、优化渲染逻辑
制定性能提升策略：使用
```
Plan
```
agent按影响优先级（瀑布流问题 > 包体积 > 重渲染）排序优化项，并创建优化路线图

如果
react-patterns
技能可用，请将通用组件架构和React 19 API相关问题委托给它。否则，推荐执行：
npx skills add oakoss/agent-skills --skill react-patterns

References

参考资料

Rendering optimization: memo, useMemo, useCallback, compiler, re-render elimination
Code splitting: React.lazy, Suspense, dynamic imports, bundle optimization
Profiling and debugging: DevTools, performance measurement, common bottlenecks

渲染优化：memo、useMemo、useCallback、编译器、避免重渲染
代码分割：React.lazy、Suspense、动态导入、包优化
性能分析与调试：DevTools、性能测量、常见瓶颈