react-performance

Files (1)

• SKILL.md

SKILL.md (first lines)

# React Performance - optimization patterns

## When to use

- Component renders too often (excessive re-renders)
- List with hundreds/thousands of elements is slow
- Heavy computation runs on every render
- Bundle/chunk is too large (long initial load)
- Handler is recreated on every render

## Primary rule

**Do not optimize prematurely.** Measure first (React DevTools Profiler), then optimize. Premature memoization hurts readability and can be slower than no optimization.

## useMemo - expensive calculations

```tsx
// [BAD] Calculation on every render
function RecordingStats({ recordings }) {
  const stats = computeHeavyStats(recordings); // expensive
  return <StatsChart data={stats} />;
}

// [OK] Memoize only when computeHeavyStats is actually expensive
const stats = useMemo(
  () => computeHeavyStats(recordings),
  [recordings], // recalculate only when recordings changes
);
```

**When NOT to use useMemo:**

- Simple calculations (filter on array of 10 elements)
- Creating objects/arrays as effect dependencies -> use `useRef` or move outside component instead

## useCallback - stable handlers

```tsx
// [BAD] Handler recreated on every render
// Problem when passed to a memoized child component
const handleDelete = (id: string) => deleteRecording(id);

// [OK] Stable reference
const handleDelete = useCallback(
  (id: string) => deleteRecording(id),
  [deleteRecording], // from React Query mutation - usually stable
);
```

## React.memo - preventing child re-renders

```tsx
// [OK] When component receives same props but parent changes
const RecordingCard = React.memo(function RecordingCard({
  recording,
  onDelete,
}) {
  return (
    <StyledCard>
      <Typography>{recording.name}</Typography>
      <IconButton onClick={() => onDelete(recording.id)} />
    </StyledCard>
  );
});
// Note: requires stable props (useCallback for handlers, useMemo for objects)
```

## List virtualization - mandatory for 100+ elements

```tsx
// [BAD] Renders all 5000 elements to DOM
{
  recordings.map((r) => <RecordingCard key={r.id} recording={r} />);
}

// [OK] Renders only visible elements (react-window or @tanstack/react-virtual)
import { FixedSizeList } from "react-window";

<FixedSizeList
  height={600}
  itemCount={recordings.length}
  itemSize={72}
  width="100%"
>
  {({ index, style }) => (
    <div style={style}>
      <RecordingCard recording={recordings[index]} onDelete={handleDelete} />
    </div>
  )}
</FixedSizeList>;
```

## Lazy loading - code splitting

```tsx
// [BAD] All pages in one bundle
import { TrainingPage } from "@/training/components/TrainingPage";

// [OK] Lazy load for pages and heavy components
const TrainingPage = lazy(() => import("@/training/components/TrainingPage"));

// In router with Suspense:
<Suspense fallback={<PageSkeleton />}>
  <TrainingPage />
</Suspense>;
```

## Stable list keys

```tsx
// [BAD] Index as key - causes unnecessary re-mounts when sorting/filtering
{recordings.map((r, i) => <RecordingCard key={i} ... />)}

// [OK] Stable unique identifier
{recordings.map(r => <RecordingCard key={r.id} ... />)}
```

## React Query - query optimization

From ArkadiuszSieracki/mastermind-agentic-sdlc-vscode-copilot, Apache-2.0.

More from ArkadiuszSieracki/mastermind-agentic-sdlc-vscode-copilot