react-patterns

This skill provides a structured framework for adopting React 19 features in modern web applications. It is designed for frontend developers and software engineers who need to maintain high-performance, maintainable codebases while leveraging the latest React ecosystem advancements. The skill guides users through optimizing component render paths using the React Compiler, managing side effects, and deciding between different state synchronization strategies.

• React Compiler optimization: Identifies patterns for pure components, serializable props, and correct memoization via DevTools verification.

• Server Actions and Forms: Facilitates secure form-centric mutations using modern React 19 APIs, including useActionState and useOptimistic for immediate UI feedback.

• Data Fetching and Hooks: Provides implementation patterns for the new 'use' hook for handling Promises and Context, while differentiating between RSC (React Server Components) and SPA-only patterns.

• Mutation Strategy: Offers prescriptive guidance on selecting between React 19 Actions for simple CRUD operations and TanStack Query (useMutation) for complex, cache-dependent SPA mutations.

• Inputs include component files, API mutation requirements, and existing data-fetching logic in TypeScript/React projects.

• Outputs consist of refactored components, optimized render logic, configured form handlers, and improved cache invalidation flows.

• Practical constraints: Emphasizes avoiding duplicate logic between React Actions and TanStack Query; requires React 19 compatibility; assumes familiarity with standard React lifecycle patterns.

• Best practices: Prioritize inline event handlers for the React Compiler, strictly follow pure function principles, and leverage Suspense boundaries when utilizing the 'use' hook for data streams.