From harness-claude
Prevents expensive re-renders and recomputations in React using React.memo, useMemo, and useCallback. Guides profiling first and covers React 19 Compiler implications.
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeThis skill uses the workspace's default tool permissions.
> Prevent expensive re-renders and recomputations with React memoization APIs
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.
Optimizes React apps using memoization (React.memo, useMemo, useCallback), code splitting, virtualization, and concurrent rendering. Use for slow components, bundle size reduction, large datasets, and re-render prevention.
Provides React performance guidelines for bundle optimization, re-render reduction, hooks usage, and component composition during writing, reviewing, refactoring.
Share bugs, ideas, or general feedback.
Prevent expensive re-renders and recomputations with React memoization APIs
React.memo)useMemo)React.memo on child components (use useCallback)React.memo to skip re-render when props are shallowly equal:
const ExpensiveList = React.memo(function ExpensiveList({ items }: { items: Item[] }) {
return <ul>{items.map((i) => <li key={i.id}>{i.name}</li>)}</ul>;
});
useMemo for expensive computations:
const sortedItems = useMemo(() => [...items].sort(compareFn), [items]);
useCallback for stable callback references:
const handleClick = useCallback(() => onSelect(id), [id, onSelect]);
React.memo/useMemo until you verify the compiler does not handle it.Memoization trades memory for computation. React's memoization hooks cache values between renders when dependency arrays are unchanged.
Shallow equality: React.memo uses shallow comparison — object/array props created inline always produce new references, breaking memoization. Pass stable references or memoize the props themselves.
useMemo vs useCallback:
useMemo memoizes a computed value: useMemo(() => compute(), [dep])useCallback memoizes a function: useCallback(() => fn(), [dep]) — equivalent to useMemo(() => () => fn(), [dep])React 19 Compiler: The React compiler automatically memoizes components and hooks. Manual React.memo, useMemo, and useCallback may become unnecessary in codebases using the compiler.
Anti-pattern: Wrapping every component in React.memo without profiling. Memo has overhead — the cost of comparison must be less than the cost of re-rendering.
https://patterns.dev/react/memoization-pattern