Help us improve
Share bugs, ideas, or general feedback.
From antigravity-awesome-skills
Diagnoses slow React components by profiling re-renders with React DevTools, identifies hotspots like state churn and expensive lists, suggests fixes like memoization, useCallback, and state isolation.
npx claudepluginhub sickn33/antigravity-awesome-skills --plugin antigravity-awesome-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/antigravity-awesome-skills:react-component-performanceThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Identify render hotspots, isolate expensive updates, and apply targeted optimizations without changing UI behavior.
Diagnoses slow React components by identifying render hotspots, isolating expensive updates, and applying targeted optimizations like memoization and state splitting.
Optimizes React performance using React.memo for component memoization, custom prop comparisons, and useMemo for expensive computations like filtering and sorting. Use for preventing unnecessary re-renders.
Audits React and Next.js code for six critical pitfalls: nested components, index keys, derived state in effects, unsafe fetching, unmemoized contexts, and more.
Share bugs, ideas, or general feedback.
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.