react-19_skill

Overview

This skill explains the patterns, new APIs, and breaking changes introduced in React 19 compared to React 18. It focuses on practical migration guidance for .tsx components and hooks, covering ref-as-prop, new hooks (use, useOptimistic, useActionState, useFormStatus), form Actions, compiler-driven memoization, and removed APIs. Use it when updating code, writing TypeScript types, or implementing Server Components and Next.js App Router integrations.

How this skill works

The skill inspects common React patterns and highlights what to change when moving to React 19: replacing ReactDOM.render/hydrate, switching to createRoot/hydrateRoot, converting forwardRef() usages to ref-as-prop, and adopting new hooks and form Actions. It flags deprecated APIs, TypeScript type adjustments, ref cleanup conventions, and patterns made obsolete by the React Compiler and server-first mindset. It also summarizes hydration improvements, custom element behavior, and resource preloading APIs.

When to use it

• Upgrading a codebase from React 18 (or earlier) to React 19
• Converting .tsx components to follow new ref, context, and TypeScript rules
• Implementing Server Components, Form Actions, or use() to read promises
• Replacing legacy APIs (ReactDOM.render, findDOMNode, string refs, legacy Context)
• Integrating with Next.js App Router / Server Actions (also use nextjs-15)

Best practices

• Prefer named imports from 'react' and 'react-dom/client' and migrate to createRoot().render()
• Let the React Compiler handle memoization; use useMemo/useCallback only for edge cases and stable dependencies
• Treat ref as a regular prop; return cleanup functions from ref callbacks instead of relying on null
• Use new hooks for form UX: useActionState, useOptimistic, and useFormStatus to simplify pending/optimistic flows
• Update TypeScript: always provide generic for useRef, import JSX types explicitly, and run provided codemods

Example use cases

• Migrate a form component to use useActionState and form action functions for server-handled submits
• Convert forwardRef-wrapped inputs to plain components accepting ref as prop and returning cleanup from ref callbacks
• Read server promises inside components using use() inside Suspense boundaries
• Implement optimistic UI with useOptimistic for chat or list UIs and automatically revert on error
• Preload fonts and scripts with prefetchDNS, preconnect, preload, and preinit before rendering heavy components