react-component-performance by dimillian/skills
npx skills add https://github.com/dimillian/skills --skill react-component-performance识别渲染热点,隔离高成本更新,并应用针对性优化,同时不改变 UI 行为。
memo 包装叶子节点行。useCallback/useMemo。广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
将定时器或动画计数器移到子组件中,这样父级列表就不会在每次计数时重新渲染。
// ❌ 之前 – 整个父组件(和列表)每秒都重新渲染
function Dashboard({ items }: { items: Item[] }) {
const [tick, setTick] = useState(0);
useEffect(() => {
const id = setInterval(() => setTick(t => t + 1), 1000);
return () => clearInterval(id);
}, []);
return (
<>
<Clock tick={tick} />
<ExpensiveList items={items} /> {/* 每秒重新渲染 */}
</>
);
}
// ✅ 之后 – 只有 <Clock> 重新渲染;列表不受影响
function Clock() {
const [tick, setTick] = useState(0);
useEffect(() => {
const id = setInterval(() => setTick(t => t + 1), 1000);
return () => clearInterval(id);
}, []);
return <span>{tick}s</span>;
}
function Dashboard({ items }: { items: Item[] }) {
return (
<>
<Clock />
<ExpensiveList items={items} />
</>
);
}
useCallback + memo 稳定回调函数// ❌ 之前 – 每次渲染都创建新的处理函数引用,破坏了 Row 的记忆化
function List({ items }: { items: Item[] }) {
const handleClick = (id: string) => console.log(id); // 每次渲染都生成新引用
return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);
}
// ✅ 之后 – 稳定的处理函数;Row 仅在其自身的 item 改变时重新渲染
const Row = memo(({ item, onClick }: RowProps) => (
<li onClick={() => onClick(item.id)}>{item.name}</li>
));
function List({ items }: { items: Item[] }) {
const handleClick = useCallback((id: string) => console.log(id), []);
return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);
}
// ❌ 之前 – 每次渲染都重新计算
function Summary({ orders }: { orders: Order[] }) {
const total = orders.reduce((sum, o) => sum + o.amount, 0); // 每次渲染都运行
return <p>Total: {total}</p>;
}
// ✅ 之后 – 仅在 orders 改变时重新计算
function Summary({ orders }: { orders: Order[] }) {
const total = useMemo(() => orders.reduce((sum, o) => sum + o.amount, 0), [orders]);
return <p>Total: {total}</p>;
}
当用户需要具体的重构示例时,加载 references/examples.md。
每周安装量
279
代码仓库
GitHub 星标数
2.3K
首次出现时间
2026 年 1 月 28 日
安全审计
已安装于
codex248
opencode241
gemini-cli229
github-copilot220
cursor217
claude-code208
Identify render hotspots, isolate expensive updates, and apply targeted optimizations without changing UI behavior.
memo only when props are stable.useCallback/useMemo for handlers and derived values.Move a timer or animation counter into a child so the parent list never re-renders on each tick.
// ❌ Before – entire parent (and list) re-renders every second
function Dashboard({ items }: { items: Item[] }) {
const [tick, setTick] = useState(0);
useEffect(() => {
const id = setInterval(() => setTick(t => t + 1), 1000);
return () => clearInterval(id);
}, []);
return (
<>
<Clock tick={tick} />
<ExpensiveList items={items} /> {/* re-renders every second */}
</>
);
}
// ✅ After – only <Clock> re-renders; list is untouched
function Clock() {
const [tick, setTick] = useState(0);
useEffect(() => {
const id = setInterval(() => setTick(t => t + 1), 1000);
return () => clearInterval(id);
}, []);
return <span>{tick}s</span>;
}
function Dashboard({ items }: { items: Item[] }) {
return (
<>
<Clock />
<ExpensiveList items={items} />
</>
);
}
useCallback + memo// ❌ Before – new handler reference on every render busts Row memo
function List({ items }: { items: Item[] }) {
const handleClick = (id: string) => console.log(id); // new ref each render
return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);
}
// ✅ After – stable handler; Row only re-renders when its own item changes
const Row = memo(({ item, onClick }: RowProps) => (
<li onClick={() => onClick(item.id)}>{item.name}</li>
));
function List({ items }: { items: Item[] }) {
const handleClick = useCallback((id: string) => console.log(id), []);
return items.map(item => <Row key={item.id} item={item} onClick={handleClick} />);
}
// ❌ Before – recomputes on every render
function Summary({ orders }: { orders: Order[] }) {
const total = orders.reduce((sum, o) => sum + o.amount, 0); // runs every render
return <p>Total: {total}</p>;
}
// ✅ After – recomputes only when orders changes
function Summary({ orders }: { orders: Order[] }) {
const total = useMemo(() => orders.reduce((sum, o) => sum + o.amount, 0), [orders]);
return <p>Total: {total}</p>;
}
Load references/examples.md when the user wants a concrete refactor example.
Weekly Installs
279
Repository
GitHub Stars
2.3K
First Seen
Jan 28, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex248
opencode241
gemini-cli229
github-copilot220
cursor217
claude-code208
Flutter应用架构设计指南:分层结构、数据层实现与最佳实践
3,400 周安装