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:

tsx

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:

tsx

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:

tsx

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

tsx

'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

tsx

// 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

react-19

NPX Install

Tags

SKILL.md Content