How does this skill help with the React Compiler?

It provides specific coding standards and pure component patterns that ensure your code is optimized by the compiler, including guidance on when to use 'use no memo' for manual control.

Should I use React Actions or TanStack Query for mutations?

The skill includes a comparison guide; generally, use React Actions for form-heavy features and CRUD, while preferring TanStack Query for complex SPA data flows and non-form mutations.

Does this skill support the new 'use' hook?

Yes, it provides implementation patterns for the 'use' hook to efficiently unwrap Promises and Context within Suspense boundaries, particularly useful for RSC and data primitives.

Are these patterns compatible with React Server Components?

Absolutely. The skill covers modern patterns for both SPA-only applications and full-stack implementations using React Server Components and 'use server' actions.

React 19 Patterns

Name: React 19 Patterns
Author: involvex

byinvolvex

デザインツール

Implements modern React 19 architecture including the React Compiler, Server Actions, and enhanced state management hooks.

概要

This skill provides comprehensive guidance for building high-performance web applications using the latest React 19 features. It focuses on writing compiler-friendly code, implementing robust form handling with Server Actions and useActionState, and managing optimistic UI updates. By providing clear implementation patterns and a decision framework for choosing between native React Actions and TanStack Query, this skill ensures developers follow industry best practices for both Single Page Applications (SPA) and React Server Component (RSC) architectures.

主な機能

Decision matrices for choosing between Actions and TanStack Query mutations
React Compiler optimization strategies and pure component patterns
Data unwrapping patterns using the 'use' hook for Promises and Context
Optimistic UI updates using the new useOptimistic hook
Implementation of React 19 Actions for form-centric mutations
0 GitHub stars

ユースケース

Modernizing legacy React components for compatibility with the React Compiler
Refactoring data fetching and context usage with Suspense-ready patterns
Implementing complex form logic with built-in validation and pending states

概要

主な機能

Decision matrices for choosing between Actions and TanStack Query mutations
React Compiler optimization strategies and pure component patterns
Data unwrapping patterns using the 'use' hook for Promises and Context
Optimistic UI updates using the new useOptimistic hook
Implementation of React 19 Actions for form-centric mutations
0 GitHub stars

ユースケース

Modernizing legacy React components for compatibility with the React Compiler
Refactoring data fetching and context usage with Suspense-ready patterns
Implementing complex form logic with built-in validation and pending states