React 19

Overview of New Features

Feature Description

Actions Async functions in transitions for data mutations

useActionState

Handle action state with pending/error

useFormStatus

Access parent form status

useOptimistic

Optimistic UI updates

use()

Read resources in render (Promises, Context)

Server Components Components that render on server

Server Actions Server functions called from client

React Compiler Automatic memoization

Ref as prop Pass ref directly without forwardRef

Actions

Actions are async functions used in transitions to handle mutations:

import { useTransition } from 'react';

function UpdateProfile() { const [isPending, startTransition] = useTransition();

async function handleSubmit(formData: FormData) { startTransition(async () => { const result = await updateProfile(formData); if (result.error) { showToast(result.error); } }); }

return ( <form action={handleSubmit}> <input name="name" type="text" /> <button type="submit" disabled={isPending}> {isPending ? 'Saving...' : 'Save'} </button> </form> ); }

useActionState

Replaces the experimental useFormState . Manages form action state including pending status:

import { useActionState } from 'react';

interface FormState { message: string | null; errors: Record<string, string[]>; }

async function createPost(prevState: FormState, formData: FormData): Promise<FormState> { const title = formData.get('title') as string;

if (!title || title.length < 3) { return { message: null, errors: { title: ['Title must be at least 3 characters'] } }; }

try { await savePost({ title }); return { message: 'Post created!', errors: {} }; } catch (error) { return { message: 'Failed to create post', errors: {} }; } }

function CreatePostForm() { const [state, formAction, isPending] = useActionState(createPost, { message: null, errors: {} });

return ( <form action={formAction}> <input name="title" type="text" /> {state.errors.title && <p className="error">{state.errors.title[0]}</p>} <button type="submit" disabled={isPending}> {isPending ? 'Creating...' : 'Create Post'} </button> </form> ); }

useFormStatus

Access the status of a parent <form> from any child component:

import { useFormStatus } from 'react-dom';

function SubmitButton() { const { pending, data, method, action } = useFormStatus();

return ( <button type="submit" disabled={pending}> {pending ? 'Submitting...' : 'Submit'} </button> ); }

// Usage - must be child of <form> function ContactForm() { return ( <form action={submitContact}> <input name="email" type="email" required /> <SubmitButton /> </form> ); }

Reusable Form Components

'use client'; import { useFormStatus } from 'react-dom';

export function FormButton({ children, pendingText = 'Submitting...', ...props }) { const { pending } = useFormStatus();

return ( <button {...props} disabled={pending || props.disabled}> {pending ? pendingText : children} </button> ); }

Full Reference: See hooks.md for useOptimistic, use() hook, Ref handling, Document Metadata.

Server Components & Server Actions

// app/users/page.tsx (Server Component by default) export default async function UsersPage() { const users = await fetchUsers(); return <UserList users={users} />; }

// app/actions.ts 'use server'; export async function createPost(formData: FormData) { const title = formData.get('title') as string; await db.post.create({ data: { title } }); revalidatePath('/posts'); redirect(/posts); }

Full Reference: See server.md for Server Components patterns, React Compiler, Migration Guide.

Best Practices

• ✅ Use Actions for form submissions and mutations

• ✅ Use useOptimistic for immediate feedback

• ✅ Use use() instead of useEffect for data fetching

• ✅ Let React Compiler handle memoization

• ✅ Use Server Components for static content

• ✅ Use Server Actions for secure mutations

• ❌ Don't create Promises inside components for use()

• ❌ Don't mix client/server code without proper boundaries

When NOT to Use This Skill

• React 18 and earlier features - Use react skill instead

• General form handling - Use react-forms or react-hook-form skills

• Performance optimization - Use react-performance skill

Anti-Patterns

Anti-Pattern Problem Solution

Creating Promises in render for use() New promise every render Create promise outside component

Using useFormState instead of useActionState Deprecated in React 19 Use useActionState with isPending

Missing 'use server' directive Code runs on client Add 'use server' at top of file

Not validating Server Action inputs Security vulnerability Always validate with Zod

Quick Troubleshooting

Issue Likely Cause Fix

Action not working Missing action attribute Add action={serverAction} to form

isPending not available Using old useFormState Switch to useActionState

Serialization errors Passing functions/classes Only pass serializable data

ref not working Using old forwardRef pattern Pass ref as regular prop

Reference Files

File Content

hooks.md useOptimistic, use(), Ref handling, Metadata

server.md Server Components, Server Actions, Compiler, Migration

External Documentation

• React 19 Blog

• React 19 Upgrade Guide