React Patterns

React Patterns

React 19 performance patterns and composition architecture for Vite + Cloudflare projects. 50+ rules ranked by impact — eliminating waterfalls, bundle

Category: development Source: jezweb/claude-skills

What Is React Patterns?

React Patterns is a comprehensive skillset focused on enhancing the performance and maintainability of React 19 applications, particularly those built with Vite and deployed to Cloudflare Workers. This skill provides a curated set of over 50 actionable rules, each ranked by their potential impact on application performance and code quality. It is designed not only as a checklist for writing new React components but also as a robust guide for reviewing, refactoring, and debugging existing codebases. By targeting common pitfalls such as asynchronous waterfalls, unnecessary re-renders, and improper component composition, React Patterns helps developers build scalable, high-performance frontend architectures.

Why Use React Patterns?

Modern React applications often suffer from performance bottlenecks, excessive bundle sizes, and convoluted component hierarchies. These problems are magnified in projects targeting modern build tools like Vite and edge environments such as Cloudflare Workers, where every millisecond and kilobyte counts. React Patterns addresses these challenges by consolidating industry best practices, React 19's new APIs, and advanced composition techniques into a single, actionable resource.

By adopting React Patterns, teams can:

  • Systematically identify and resolve performance issues before they reach production.
  • Reduce time spent debugging slow or tangled components.
  • Foster a culture of code quality and maintainability through repeatable review processes.
  • Make informed architectural decisions, improving reusability and scalability.
  • Leverage the latest features in React 19 for optimal client/server boundary management.

How to Get Started

Integrating React Patterns into your workflow is straightforward:

  1. Write or Refactor Components: Use the checklist as a reference when developing or updating React components. Start with the highest-impact (CRITICAL) rules.
  2. Review Code: During code reviews, consult the patterns to catch common anti-patterns like sequential async calls or unnecessary prop drilling.
  3. Debug Performance: If a component is slow or re-renders unexpectedly, use the skill to diagnose and correct the root causes.
  4. Automate Checks: For larger teams or codebases, consider adopting some patterns as lint rules or static analysis checks, ensuring consistency across the project.

The skill is compatible with Claude Code, making it easy to integrate into AI-assisted workflows for even faster feedback during development and review cycles.

Key Features

1. Ranked Impact Rules

Each performance and composition rule is ranked by its practical impact. Critical issues, such as async waterfalls, are prioritized to ensure that the most significant bottlenecks are addressed first. This approach enables teams to focus their efforts where they matter most.

2. Waterfall Elimination

Asynchronous waterfalls—sequential API or data-fetching calls—are a notorious performance killer. React Patterns provides clear guidance and code examples for transforming sequential awaits into parallel execution:

// Problem: Awaiting in sequence (bad)
const user = await fetchUser();
const posts = await fetchPosts(user.id);

// Fix: Fetch in parallel (good)
const [user, posts] = await Promise.all([fetchUser(), fetchPosts()]);

3. Bundle Optimization

The collection includes strategies for reducing bundle size, such as leveraging code-splitting, dynamic imports, and removing dead code. It also covers techniques for minimizing dependencies and optimizing asset delivery in Vite-powered projects.

4. Render Prevention

React Patterns highlights common sources of unnecessary re-renders—like unstable function props or state changes—and provides practical fixes using React.memo, useCallback, or context selectors:

// Problem: Unstable function causes child re-render
<MyComponent onClick={() => doSomething()} />

// Fix: Memoize the handler
const handleClick = useCallback(() => doSomething(), []);
<MyComponent onClick={handleClick} />

5. Composition Over Boolean Props

Rather than bloating components with many boolean props, React Patterns encourages composition and slot-based APIs for extensibility and clarity:

// Problem: Too many boolean flags
<Button primary={true} secondary={false} />

// Fix: Use composition
<PrimaryButton>Click me</PrimaryButton>

6. Server/Client Boundaries for React 19

With new React 19 APIs, the skill details best practices for cleanly separating server-only and client-only logic, ensuring efficient hydration and minimal client bundles—especially relevant for edge deployments on Cloudflare Workers.

Best Practices

  • Prioritize Critical Rules: Always address high-impact issues, such as async waterfalls and large bundle sizes, before moving to less critical optimizations.
  • Prefer Composition: Replace complex prop interfaces and deeply nested conditionals with composable components for maintainability and scalability.
  • Minimize Re-Renders: Use memoization techniques and avoid passing unstable props to prevent unnecessary updates and improve responsiveness.
  • Optimize for the Edge: For Cloudflare deployments, ensure all server-side logic is clearly isolated and does not leak into the client bundle.
  • Leverage Modern APIs: Stay up to date with React 19 features, and use context selectors, lazy components, and streaming APIs where appropriate.

Important Notes

  • Not All Rules Apply Everywhere: Some patterns are specific to Vite or Cloudflare environments; always consider your application’s architecture before applying a rule.
  • Measure Before and After: Use profiling tools to confirm that optimizations have the intended effect, especially for complex changes.
  • Avoid Premature Optimization: Focus on the highest-impact issues first, and resist the urge to micro-optimize unless there is a demonstrated need.
  • Documentation is Key: When applying advanced composition or architectural patterns, document the reasoning and usage to aid future maintainers.
  • Iterative Improvement: Treat React Patterns as a living checklist, revisiting it regularly as your codebase and the React ecosystem evolve.

By systematically applying these patterns, teams can build React applications that are fast, maintainable, and ready for modern edge delivery.