React Performance Audit

Overview

Audit React components for rendering performance issues. Provides a decision tree for when to apply memoization, virtualization, code splitting, and Suspense boundaries. Stack-specific Tier 3 reference skill.

Workflow

1. Read project setup — Check .chalk/docs/engineering/ for architecture docs, React version, state management library (Redux, Zustand, Jotai, Context), and rendering framework (CRA, Vite, Next.js, Remix). The framework determines which optimizations are available.

2. Identify the scope — Parse $ARGUMENTS for specific components or areas to audit. If none specified, scan src/ for the largest component files and component tree entry points.

3. Audit for unnecessary re-renders — Check for:

   • Components re-rendering when their props have not changed (missing React.memo)
   • Inline object/array/function creation in JSX props (creates new references every render)
   • Context providers with frequently changing values that trigger wide re-render trees
   • State stored too high in the tree, causing children to re-render unnecessarily