react-performance-optimization by nickcrew/claude-ctx-plugin
npx skills add https://github.com/nickcrew/claude-ctx-plugin --skill react-performance-optimization通过记忆化、代码分割、虚拟化和高效渲染策略优化 React 应用性能的专家指南。
当 props 或 state 改变时,React 会重新渲染组件。不必要的重新渲染会浪费 CPU 周期并降低用户体验。关键优化技术:
根据需要加载详细模式和示例:
| 主题 | 参考文件 |
|---|---|
| React.memo、useMemo、useCallback 模式 | skills/react-performance-optimization/references/memoization.md |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 使用 lazy/Suspense 进行代码分割,打包优化 | skills/react-performance-optimization/references/code-splitting.md |
| 大型列表虚拟化 (react-window) | skills/react-performance-optimization/references/virtualization.md |
| 状态管理策略,上下文拆分 | skills/react-performance-optimization/references/state-management.md |
| useTransition、useDeferredValue (React 18+) | skills/react-performance-optimization/references/concurrent-features.md |
| React DevTools Profiler,性能监控 | skills/react-performance-optimization/references/profiling-debugging.md |
| 常见陷阱和反模式 | skills/react-performance-optimization/references/common-pitfalls.md |
# 打开 React DevTools Profiler
# 记录交互 → 分析火焰图 → 找到慢组件
寻找:
针对不必要的重新渲染:
React.memo 包裹组件useCallback 获取稳定的函数引用针对昂贵计算:
useMemo 缓存结果针对大型列表:
针对初始加载慢:
React.lazy 添加代码分割# 记录新的 Profiler 会话
# 比较优化前后的指标
# 确保优化确实有效
import { memo } from 'react';
const ExpensiveList = memo(({ items, onItemClick }) => {
return items.map(item => (
<Item key={item.id} data={item} onClick={onItemClick} />
));
});
import { useMemo } from 'react';
function DataTable({ items, filters }) {
const filteredItems = useMemo(() => {
return items.filter(item => filters.includes(item.category));
}, [items, filters]);
return <Table data={filteredItems} />;
}
import { useCallback } from 'react';
function Parent() {
const handleClick = useCallback((id) => {
console.log('Clicked:', id);
}, []);
return <MemoizedChild onClick={handleClick} />;
}
import { lazy, Suspense } from 'react';
const Dashboard = lazy(() => import('./Dashboard'));
const Reports = lazy(() => import('./Reports'));
function App() {
return (
<Suspense fallback={<Loading />}>
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/reports" element={<Reports />} />
</Routes>
</Suspense>
);
}
import { FixedSizeList } from 'react-window';
function VirtualList({ items }) {
return (
<FixedSizeList
height={600}
itemCount={items.length}
itemSize={80}
width="100%"
>
{({ index, style }) => (
<div style={style}>{items[index].name}</div>
)}
</FixedSizeList>
);
}
config={{ theme: 'dark' }})优化前:
优化目标:
优化后:
每周安装量
744
仓库
GitHub 星标
12
首次出现
Jan 21, 2026
安全审计
安装于
opencode681
gemini-cli665
codex659
github-copilot635
cursor592
kimi-cli545
Expert guidance for optimizing React application performance through memoization, code splitting, virtualization, and efficient rendering strategies.
React re-renders components when props or state change. Unnecessary re-renders waste CPU cycles and degrade user experience. Key optimization techniques:
Load detailed patterns and examples as needed:
| Topic | Reference File |
|---|---|
| React.memo, useMemo, useCallback patterns | skills/react-performance-optimization/references/memoization.md |
| Code splitting with lazy/Suspense, bundle optimization | skills/react-performance-optimization/references/code-splitting.md |
| Virtualization for large lists (react-window) | skills/react-performance-optimization/references/virtualization.md |
| State management strategies, context splitting | skills/react-performance-optimization/references/state-management.md |
| useTransition, useDeferredValue (React 18+) | skills/react-performance-optimization/references/concurrent-features.md |
# Open React DevTools Profiler
# Record interaction → Analyze flame graph → Find slow components
Look for:
For unnecessary re-renders:
React.memouseCallback for stable function referencesFor expensive computations:
useMemo to cache resultsFor large lists:
For slow initial load:
React.lazy# Record new Profiler session
# Compare before/after metrics
# Ensure optimization actually helped
import { memo } from 'react';
const ExpensiveList = memo(({ items, onItemClick }) => {
return items.map(item => (
<Item key={item.id} data={item} onClick={onItemClick} />
));
});
import { useMemo } from 'react';
function DataTable({ items, filters }) {
const filteredItems = useMemo(() => {
return items.filter(item => filters.includes(item.category));
}, [items, filters]);
return <Table data={filteredItems} />;
}
import { useCallback } from 'react';
function Parent() {
const handleClick = useCallback((id) => {
console.log('Clicked:', id);
}, []);
return <MemoizedChild onClick={handleClick} />;
}
import { lazy, Suspense } from 'react';
const Dashboard = lazy(() => import('./Dashboard'));
const Reports = lazy(() => import('./Reports'));
function App() {
return (
<Suspense fallback={<Loading />}>
<Routes>
<Route path="/" element={<Dashboard />} />
<Route path="/reports" element={<Reports />} />
</Routes>
</Suspense>
);
}
import { FixedSizeList } from 'react-window';
function VirtualList({ items }) {
return (
<FixedSizeList
height={600}
itemCount={items.length}
itemSize={80}
width="100%"
>
{({ index, style }) => (
<div style={style}>{items[index].name}</div>
)}
</FixedSizeList>
);
}
config={{ theme: 'dark' }})Before optimizing:
Optimization targets:
After optimizing:
Weekly Installs
744
Repository
GitHub Stars
12
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode681
gemini-cli665
codex659
github-copilot635
cursor592
kimi-cli545
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
103,800 周安装
| React DevTools Profiler, performance monitoring | skills/react-performance-optimization/references/profiling-debugging.md |
| Common pitfalls and anti-patterns | skills/react-performance-optimization/references/common-pitfalls.md |