react19-patterns_skill

Overview

This skill is a concise guide to React 19 patterns and best practices for component design, state management, memoization, and new hooks. It explains when to prefer built-in React Compiler optimizations and how to adopt Server Actions, use(), Suspense, and optimistic updates. Designed for TypeScript codebases and migration from earlier React versions.

How this skill works

The skill inspects common component patterns and recommends replacements for legacy APIs such as forwardRef and excessive memoization. It summarizes when to use new React 19 hooks (use, useOptimistic, useActionState, useFormStatus) and shows how Suspense and document metadata can be used at the component level. It highlights migration checkpoints and concrete scenarios where memoization or memo should be applied sparingly.

When to use it

• When migrating from React 18 to React 19 and removing forwardRef usages
• When you need conditional Context or to read Promises directly with use()
• When implementing optimistic UI flows with useOptimistic and startTransition
• When managing form submission state with useActionState and useFormStatus
• When you want fine-grained loading UX using nested Suspense boundaries

Best practices

• Pass refs as plain props instead of using forwardRef; use useImperativeHandle with a ref prop when needed
• Avoid premature useMemo/useCallback/memo; profile first and add memoization only for heavy computations, large lists, or external-library stability
• Use use() together with Suspense for async data and conditional Context reads to simplify components
• Prefer useOptimistic for UI-first updates and startTransition for eventual consistency with server actions
• Manage form lifecycle with useActionState and disable submit controls with useFormStatus during pending states

Example use cases

• Replace forwardRef-based inputs by accepting ref?: React.Ref and forwarding it to an inner element
• Wrap heavy chart/table rendering in memo and useMemo for derived props when rendering thousands of rows
• Read server-fetched user data inside a UserProfile component with use(userPromise) inside a Suspense fallback
• Implement a todo add flow using useOptimistic for immediate UI updates and startTransition to sync server state
• Use useActionState for profile update form to surface validation errors from the action and disable the submit button via useFormStatus