react-19_skill

Overview

This skill documents practical React 19 patterns and constraints for writing components, hooks, actions, and forms with the React Compiler. It emphasizes mandatory import patterns, component declarations, and new behaviors for use(), Actions, refs-as-props, optimistic updates, and context providers. Follow these rules to avoid common runtime and TypeScript errors and get predictable compiler optimizations.

How this skill works

The skill inspects .tsx/.jsx files for React 19 idioms and enforces opinionated patterns: named imports only, arrow function components using React.FC and named exports, and forbidding manual memoization. It outlines correct usage of use() for promises and context, Action and Server Action patterns, useOptimistic, useActionState, useFormStatus, and ref handling as plain props. It highlights anti-patterns that break the React Compiler or runtime behavior.

When to use it

• When authoring React 19 components or hooks in .tsx/.jsx files.
• When using promises in render paths—use use() with promises created outside render.
• When implementing server or client Actions, forms, and form state handling.
• When migrating from older React patterns like forwardRef, useMemo/useCallback, or default React imports.
• When wiring refs, context providers, or optimistic UI updates under React 19.

Best practices

• Always use named imports (e.g., import { use, useState } from 'react').
• Declare components as arrow functions typed with React.FC and export them by name. Avoid function declarations and default exports unless framework-required.
• Never use useMemo, useCallback, or memo manually—rely on the React Compiler for optimization.
• Pass promises into components from outside render; do not create promises inside render before calling use().
• Treat ref as a regular prop; do not use forwardRef. Return cleanup functions from ref callbacks when needed.
• Use useActionState, useOptimistic, and useFormStatus for standard form and optimistic patterns instead of bespoke state plumbing.

Example use cases

• Component reading server data: parent creates a dataPromise and child calls use(dataPromise) inside a Suspense boundary.
• Form using native Actions: form action calls an async handler and relies on automatic form reset and pending state.
• Programmatic server action with react-hook-form: submit typed object to an exported async action and return structured errors.
• Optimistic todo add: useOptimistic to render pending item then let React revert after request completes.
• Ref-as-prop input: expose a ref prop on a custom Input component and call inputRef.current?.focus() from parent.