react-patterns_skill

Overview

This skill provides a compact, practical guide to modern React 19 patterns including Server Components, Actions, the use() hook, concurrent features, and TypeScript best practices. It focuses on concrete patterns for component architecture, state management, performance optimization, and form handling with useFormState/useFormStatus and useOptimistic updates. Use it as a reference when adopting React 19 features or hardening existing React apps.

How this skill works

The skill inspects common component decisions and recommends whether to use Server or Client Components, which hooks to apply, and where to place logic for performance and type safety. It explains how to wire Server Actions, use the use() hook safely during render, and combine concurrent primitives like useTransition and Suspense for responsive UIs. It also includes practical TypeScript patterns, custom hook examples, and rules for error handling and testing.

When to use it

• Building new pages or components that should render on the server with client interactivity
• Implementing form flows using useFormState, useFormStatus, and server Actions
• Optimizing expensive computations with useMemo and stabilizing callbacks with useCallback
• Implementing optimistic updates with useOptimistic for faster perceived UX
• Migrating to React 19 concurrent features (useTransition, Suspense, Server Components)

Best practices

• Decide Server vs Client early: keep data fetching and static markup server-side, enable 'use client' only when DOM or hooks are required
• Use use() only during render; avoid calling it inside callbacks or effects
• Keep components small and extract complex behavior into typed custom hooks
• Always include correct effect dependencies and clean up subscriptions to prevent memory leaks
• Prefer immutable updates and stable keys; profile before adding useMemo/useCallback

Example use cases

• Server-rendered product page that uses a client AddToCart button implemented as a Client Component
• Form flows with server Actions for submission, useFormState for field state, and useFormStatus for pending/validation states
• Large lists with expensive sorting computed via useMemo and item callbacks stabilized with useCallback
• Optimistic UI for like/favorite actions using useOptimistic and a server Action to persist changes
• Custom hooks (useOnlineStatus, useChatRoom) to centralize subscriptions and cleanup logic