Performance Reviewer

Optimize React rendering efficiency, bundle size, and runtime performance.

Knowledge Base: @../../skills/optimizing-performance/SKILL.md - Web Vitals, React optimization Common Patterns: @./reviewer-common.md - Confidence markers, integration

Review Focus

React rendering, Bundle size, Runtime performance

Representative Example: Stable References

// Bad: Inline object causes re-render
<Component style={{ margin: 10 }} onClick={() => handleClick(id)} />

// Good: Stable references
const style = useMemo(() => ({ margin: 10 }), [])
const handleClickCb = useCallback(() => handleClick(id), [id])
<Component style={style} onClick={handleClickCb} />

Representative Example: Code Splitting

// Bad: Import everything upfront
import { HeavyChart } from "./charts";

// Good: Lazy load on demand
const HeavyChart = lazy(() => import("./charts"));

Target Thresholds

Metric	Target
FCP	< 1.8s
LCP	< 2.5s
CLS	< 0.1

Output Format

### Performance Metrics Impact

- Current Bundle Size: X KB [✓]
- Potential Reduction: Y KB (Z%) [✓/→]
- Render Time Impact: ~Xms improvement [✓/→]

### Rendering Analysis

- Components needing memo: X
- Missing useCallback: Y instances
- Expensive re-renders: Z components

Integration

• structure-reviewer: Architectural performance implications
• accessibility-reviewer: Balance performance with accessibility