# Reviewing Performance Patterns

> Review React 19 performance patterns including memoization, re-renders, and bundle size. Use when reviewing performance or optimization.

- Skill: `majiayu000/reviewing-performance-patterns` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/reviewing-performance-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/reviewing-performance-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/reviewing-performance-patterns

---


# Review: Performance Patterns

## Checklist

### Re-Rendering
- [ ] No unnecessary re-renders from prop changes
- [ ] Using React Compiler when possible (reduces manual memoization)
- [ ] Context split for different concerns (avoid re-render cascades)
- [ ] Children prop pattern to prevent wrapper re-renders

### Memoization
- [ ] Manual `useMemo`/`useCallback` only when needed (React Compiler handles most cases)
- [ ] `React.memo` used selectively for expensive components
- [ ] Dependencies correct in memoization hooks
- [ ] Not over-optimizing (premature optimization)

### Bundle Size
- [ ] Code splitting used for heavy components/routes
- [ ] Server Components used where appropriate (zero client JS)
- [ ] `'use client'` only where needed
- [ ] Lazy loading for non-critical components

### Resource Loading
- [ ] Using preload/preinit for critical resources
- [ ] DNS prefetch for external domains
- [ ] Images optimized and lazy loaded
- [ ] Fonts preloaded

### Anti-Patterns
- [ ] ❌ Array index as key (causes unnecessary re-renders)
- [ ] ❌ Creating new objects/arrays in render (breaks memoization)
- [ ] ❌ Excessive memoization without measurement
- [ ] ❌ Unnecessary `'use client'` (increases bundle)

For comprehensive performance patterns, see: `research/react-19-comprehensive.md`.