Can it help with Error Boundaries in React 19?

Yes, it demonstrates how to implement standard class-based Error Boundaries and how to integrate the react-error-boundary library for better error handling.

Should I use React Actions or TanStack Query?

The skill provides a decision guide recommending React Actions for form-centric CRUD and SSR/RSC apps, while suggesting TanStack Query for complex SPA data flows and non-form mutations.

Does this cover the new 'use' hook?

Yes, it includes implementation patterns for unwrapping Promises and Context using the React 19 'use' hook in conjunction with Suspense and data primitives.

How does this skill help with the React Compiler?

It provides patterns for writing compiler-friendly, pure components and identifies when to use 'use no memo' for problematic code that cannot yet be optimized.

React 19 Patterns

Name: React 19 Patterns
Author: tianzecn

bytianzecn

•

Design Tools

Implements modern React 19 architectural patterns and optimizations including the React Compiler and Server Actions.

This skill equips Claude with the latest React 19 best practices to help you build high-performance, future-proof web applications. It provides expert guidance on optimizing components for the React Compiler, managing state with new hooks like useActionState and useOptimistic, and making informed decisions between React Actions and TanStack Query for mutations. Whether you're refactoring legacy components or building new features from scratch, this skill ensures your code adheres to modern composition patterns and utilizes the latest React 19 primitives effectively.

Key Features

01Standardized form handling and built-in validation patterns

021 GitHub stars

03React Compiler optimization and performance tuning

04Strategic decision logic for choosing between Actions and TanStack Query

05Advanced component composition using Compound Component patterns

06Server Action implementation with useActionState and useOptimistic

Use Cases

01Optimizing component performance and verifying Compiler compatibility

02Implementing complex form mutations with optimistic UI updates

03Upgrading an existing React application to version 19

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tianzecn/myclaudecode react-patterns

For use in Claude.ai and ChatGPT

Download Skill