# Performance

> Use when optimizing frontend rendering performance, server pagination, virtualized lists (react-window), code splitting (React.lazy), and error boundaries.

- Skill: `sahilkhan30/performance` (Agent Skill)
- Install (CLI): `npx skillmds@latest add sahilkhan30/performance`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sahilkhan30/performance/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: SahilKhan30 (https://skillmd.com/u/sahilkhan30)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/sahilkhan30/performance

---


# UI Performance & Virtualization Skill

## Purpose
Guide efficient rendering, virtualization, code splitting, and non-crashing UI state boundaries.

---

## 1. Principles & Rules

### CONDITIONAL VIRTUALIZATION
- Virtualize list views (e.g. `react-window` `FixedSizeList`) when dataset size, row complexity, DOM weight, interaction cost, or rendering frequency makes standard rendering materially expensive.
- Prefer **server pagination** for large datasets when the user experience does not require a continuous infinite scroll list.

### CODE SPLITTING VS ERROR HANDLING
Explicitly distinguish between bundle splitting and runtime error isolation:
1. **`React.lazy`**: Deferred component bundle loading.
2. **`Suspense`**: UI loading indicator fallback while lazy bundle resolves.
3. **`ErrorBoundary`**: Catches unhandled runtime JavaScript errors to prevent full page crashes.

```tsx
<ErrorBoundary fallback={<Alert severity="error">Failed to load view</Alert>}>
  <Suspense fallback={<TableSkeleton />}>
    <LazyTransactionTable data={data} />
  </Suspense>
</ErrorBoundary>
```