react-patterns

# React Patterns Performance 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. Rules are ranked by impact. Fix CRITICAL issues before touching MEDIUM ones. ## When to Apply - Writing new React components or pages - Reviewing code for performance issues - Refactoring components with too many props or re-renders - Debugging "why is this slow?" or "why does this re-render?" - Building reusable component libraries - Code review before merging ## 1. Eliminating Waterfalls (CRITICAL) Sequential async calls where they could be parallel. The #1 performance killer. | Pattern | Problem | Fix | |---------|---------|-----| | **Await in sequence** | `const a = await getA(); const b = await getB();` | `const [a, b] = await Promise.all([getA(), getB()]);` | | **Fetch in child** | Parent renders, then child fetches, then grandchild fetches | Hoist fetches to the highest common ancestor, pass data down | | **Suspense cascade** | Multiple Suspense boundaries that resolve sequentially | One Suspense boundary wrapping all async siblings | | **Await before branch** | `const data = await fetch(); if (condition) { use(data); }` | Move await inside the branch — don't fetch what you might not use | | **Import then render** | `const Component = await import('./Heavy'); return <Component />` | Use `React.lazy()` + `<...