Does this skill provide guidance on Error Boundaries in React 19?

Yes, it covers the continued requirement for class components for error boundaries and provides integration patterns for popular libraries like react-error-boundary.

Does this skill cover the new 'use' hook?

Yes, it includes detailed patterns for unwrapping Promises and Context using the 'use' hook, specifically showing how to integrate them with Suspense boundaries.

How does this skill help with the React Compiler?

It provides specific patterns that ensure components remain pure and 'compiler-friendly,' such as keeping props serializable and deriving values during render to avoid unnecessary ref stashing.

When should I use React Actions versus TanStack Query?

The skill recommends React Actions for form-centric mutations and SSR/RSC applications, while suggesting TanStack Query for complex SPAs that require advanced caching or non-form mutations.

React 19 Patterns & Best Practices

Name: React 19 Patterns & Best Practices
Author: MadAppGang

byMadAppGang

•

177

•

Developer Tools

Implement modern React 19 features including the React Compiler, Server Actions, and the new use hook with optimized architectural patterns.

This skill provides specialized guidance for developing with React 19, focusing on high-performance component patterns that leverage the new React Compiler's automatic memoization. It helps developers navigate the technical choice between native React Actions and TanStack Query for state mutations, implements robust form handling with useActionState, and demonstrates efficient data fetching using the use hook and Suspense. Whether you are migrating an existing codebase or starting fresh, this skill ensures your implementation follows the latest industry standards for performance, type safety, and maintainability.

Key Features

01Compiler-friendly code patterns to maximize automatic performance optimizations

02Optimistic UI patterns using the useOptimistic hook for better user experience

03177 GitHub stars

04Promise and Context unwrapping techniques using the new use hook

05Standardized implementation of React 19 Actions for form-centric mutations

06Architectural decision guides for choosing between Actions and TanStack Query

Use Cases

01Refactoring data fetching logic to utilize Suspense and the use hook for cleaner component code

02Building robust, accessible forms with built-in validation and server-side state

03Modernizing a React 18 application to leverage the React Compiler and remove manual memoization

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add madappgang/claude-code react-patterns

For use in Claude.ai and ChatGPT

Download Skill