react-patterns
React 19 performance patterns and composition architecture for Vite + Cloudflare projects. 50+ rules ranked by impact — eliminating waterfalls, bundle optimisation, re-render prevention, composition over boolean props, server/client boundaries, and React 19 APIs. Use when writing, reviewing, or refactoring React components. Triggers: 'react patterns', 'react review', 'react performance', 'optimise components', 'react best practices', 'composition patterns', 'why is it slow', 'reduce re-renders', 'fix waterfall'.
npx skills add jezweb/claude-skills --skill react-patterns --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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
- When to Apply
- 1. Eliminating Waterfalls (CRITICAL)
- 2. Bundle Size (CRITICAL)
- 3. Composition Architecture (HIGH)
- 4. Re-render Prevention (MEDIUM)
- 5. React 19 Specifics (MEDIUM)
- 6. Rendering Performance (MEDIUM)
- 7. Data Fetching (MEDIUM)
- 8. Vite + Cloudflare Specifics (MEDIUM)
- Using as a Review Checklist
What does the react-patterns skill do?
React 19 performance patterns and composition architecture for Vite + Cloudflare projects. 50+ rules ranked by impact — eliminating waterfalls, bundle optimisation, re-render prevention, composition over boolean props, server/client boundaries, and React 19 APIs. Use when writing, reviewing, or refactoring React components. Triggers: 'react patterns', 'react review', 'react performance', 'optimise components', 'react best practices', 'composition patterns', 'why is it slow', 'reduce re-renders', 'fix waterfall'.
How do I install it?
Run `npx skills add jezweb/claude-skills --skill react-patterns --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From jezweb/claude-skills, a repository with 954 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.