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

0•

디자인 도구

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.

주요 기능

01Decision matrices for choosing between Actions and TanStack Query mutations

02React Compiler optimization strategies and pure component patterns

03Data unwrapping patterns using the 'use' hook for Promises and Context

04Optimistic UI updates using the new useOptimistic hook

05Implementation of React 19 Actions for form-centric mutations

060 GitHub stars

사용 사례

01Modernizing legacy React components for compatibility with the React Compiler

02Refactoring data fetching and context usage with Suspense-ready patterns

03Implementing complex form logic with built-in validation and pending states

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add involvex/involvex-claude-marketplace react-patterns

For use in Claude.ai and ChatGPT

Download Skill