react-component-performance

Diagnose slow React components and suggest targeted performance fixes.

仓库: BEKO2210/Firstbrain
最近来源活动: 2026年5月17日 12:40
检测到的 SKILL.md 语言: 英语
星标: 15
分支: 2

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

检查来源文件

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

返回搜索返回安装

name	react-component-performance
description	Diagnose slow React components and suggest targeted performance fixes.
type	skill
created	2026-02-27T00:00:00.000Z
domain	software-development
category	frontend
risk	safe
source	Dimillian/Skills (MIT)
tags	["skill","software-development","frontend","react","component","performance"]

React Component Performance

Overview

Identify render hotspots, isolate expensive updates, and apply targeted optimizations without changing UI behavior.

When to Use

When the user asks to profile or improve a slow React component.
When you need to reduce re-renders, list lag, or expensive render work in React UI.

Workflow

Reproduce or describe the slowdown.
Identify what triggers re-renders (state updates, props churn, effects).
Isolate fast-changing state from heavy subtrees.
Stabilize props and handlers; memoize where it pays off.
Reduce expensive work (computation, DOM size, list length).
Validate: open React DevTools Profiler → record the interaction → inspect the Flamegraph for components rendering longer than ~16 ms → compare against a pre-optimization baseline recording.

Checklist

Measure: use React DevTools Profiler or log renders; capture baseline.
Find churn: identify state updated on a timer, scroll, input, or animation.
Split: move ticking state into a child; keep heavy lists static.
Memoize: wrap leaf rows with memo only when props are stable.
Stabilize props: use useCallback/useMemo for handlers and derived values.
Avoid derived work in render: precompute, or compute inside memoized helpers.
Control list size: window/virtualize long lists; avoid rendering hidden items.
Keys: ensure stable keys; avoid index when order can change.
Effects: verify dependency arrays; avoid effects that re-run on every render.
Style/layout: watch for expensive layout thrash or large Markdown/diff renders.

Optimization Patterns

Isolate ticking state

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( ( t + ), );
      (id);
  }, []);
   (
    
  );
}


 () {
   [tick, setTick] = ();
  ( {
     id = ( ( t + ), );
      (id);
  }, []);
   ;
}

 () {
   (
    
  );
}

// ❌ 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>;
}