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() + <Suspense>, renders fallback instantly

How to find them: Search for await in components. Each await is a potential waterfall. If two awaits are independent, they should be parallel.

2. Bundle Size (CRITICAL)

Every KB the user downloads is a KB they wait for.