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.

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