react-patterns

1# React Patterns
2 
3Performance and composition patterns for React 19 + Vite + Cloudflare Workers projects. Use as a checklist when writing new components, a review guide when auditing existing code, or a refactoring playbook when something feels slow or tangled.
4 
5Rules are ranked by impact. Fix CRITICAL issues before touching MEDIUM ones.
6 
7## When to Apply
8 
9- Writing new React components or pages
10- Reviewing code for performance issues
11- Refactoring components with too many props or re-renders
12- Debugging "why is this slow?" or "why does this re-render?"
13- Building reusable component libraries
14- Code review before merging
15 
16## 1. Eliminating Waterfalls (CRITICAL)
17 
18Sequential async calls where they could be parallel. The #1 performance killer.
19 
20| Pattern | Problem | Fix |
21|---------|---------|-----|
22| **Await in sequence** | `const a = await getA(); const b = await getB();` | `const [a, b] = await Promise.all([getA(), getB()]);` |
23| **Fetch in child** | Parent renders, then child fetches, then grandchild fetches | Hoist fetches to the highest common ancestor, pass data down |
24| **Suspense cascade** | Multiple Suspense boundaries that resolve sequentially | One Suspense boundary wrapping all async siblings |
25| **Await before branch** | `const data = await fetch(); if (condition) { use(data); }` | Move await inside the branch — don't fetch what you might not use |
26…