Implement React 19 patterns with Server Actions and TanStack Query mutations.
npx skills add https://github.com/jacexh/skills --skill react-patterns-jacexh
Please help me install this Agent Skill. Skill: react-patterns Source: https://github.com/jacexh/skills/tree/main/skills/react-patterns Command: npx skills add https://github.com/jacexh/skills --skill react-patterns-jacexh
Provides clear, practical guidance for adopting React 19 features and patterns so teams can write compiler-friendly components, choose appropriate mutation strategies, and implement reliable form and optimistic-update flows without introducing anti-patterns.
Create a React 19 component that uses a form-based Server Action with useActionState and useOptimistic to add todos with optimistic UI updates.
High-intent search queries and answers about installing and using this skill.
React 19 Server Actions with useActionState handle form-centric workflows directly within server components. This pattern provides reliable state management for form-centric CRUD operations without manual effect synchronization.
Use React 19 Server Actions and useActionState for form-centric workflows and simple CRUD operations. Choose TanStack Query mutations for SPA interactions, non-form button-driven events, and complex optimistic rollbacks requiring cache integration.
You add optimistic UI updates in React 19 by pairing the useOptimistic hook with your mutation strategy. This provides immediate user feedback for actions like adding todos before the server response completes.
Writing React Compiler-friendly components involves creating pure components with serializable props and avoiding unnecessary effects. You can also apply opt-out patterns for problematic components to prevent the compiler from introducing anti-patterns.
You can use the React 19 use hook with Suspense to handle asynchronous operations and data fetching. This composition pattern integrates seamlessly with error boundary implementations across both SSR/RSC and client-side SPA environments.
The best way to handle optimistic rollbacks for non-form button-driven mutations is using TanStack Query. It provides robust cache integration and automatic rollback strategies for complex SPA interactions where Server Actions are insufficient.
EzequielpereyraaRecommend React 19 patterns using the React Compiler to minimize manual memoization.
nathanielcrowell12-specImplement Next.js 15 server components, client components, server actions, and API routes.
MadAppGangManage server state and data fetching in React with TanStack Query v5.
anderskevCreate typed Zustand stores with selectors, persistence, and middleware.
