aiskillstore/react-19

React 19

React 19 (stable since Dec 2024) simplifies async operations, improves SSR, and enhances DX with Actions, Server Components, and new hooks.

When to Use

• Building React 19 applications
• Async form handling with automatic pending/error states
• Server Components for SSR
• Optimistic UI updates
• Migrating from React 18
• Server Actions for full-stack forms

Installation

npm install [email protected] [email protected]
npm install --save-dev @types/[email protected] @types/[email protected]

Required: Enable modern JSX transform in tsconfig.json:

{ "compilerOptions": { "jsx": "react-jsx" } }

Core Concepts

Execution Boundaries

| Type | Runs | State | Access | |------|------|-------|--------| | Server Component | Server | No | DB, FS, Secrets | | Client Component | Browser | Yes | DOM, Browser APIs | | Server Action | Server | No | DB, APIs |

Conventions

• "use server" = Server Action
• "use client" = Client Component
• No directive = Server Component (in RSC environment)
• async component = Auto-suspends

Essential Patterns

1. Forms with useActionState

'use client';
import { useActionState } from 'react';

function SignupForm() {
  const [state, formAction, isPending] = useActionState(
    async (prev, formData) => {
      const error = await createUser(formData.get('email'));
      return error ? { error } : null;
    },
    { error: null }
  );

  return (
    <form action={formAction}>
      <input type="email" name="email" required />
      <button disabled={isPending}>
        {isPending ? 'Signing up...' : 'Sign Up'}
      </button>
      {state.error && <p>{state.error}</p>}
    </form>
  );
}

2. Optimistic Updates

'use client';
import { useOptimistic } from 'react';

function Comments({ comments, addComment }) {
  const [optimistic, addOptimistic] = useOptimistic(
    comments,
    (curr, newComment) => [...curr, { ...newComment, pending: true }]
  );

  return (
    <div>
      {optimistic.map(c => <div key={c.id}>{c.text}</div>)}
      <form action={async (formData) => {
        addOptimistic({ id: Date.now(), text: formData.get('text') });
        await addComment(formData);
      }}>
        <input name="text" />
        <button>Post</button>
      </form>
    </div>
  );
}

3. Server Actions

'use server';
export async function createPost(formData) {
  const title = formData.get('title');
  if (!title || title.length < 3) {
    return { error: 'Title too short' };
  }
  await db.posts.create({ title });
  revalidatePath('/posts');
}

4. Streaming with Suspense

export default function Dashboard() {
  return (
    <div>
      <Suspense fallback={<Skeleton />}>
        <RevenueCard />
      </Suspense>
      <Suspense fallback={<Skeleton />}>
        <UsersCard />
      </Suspense>
    </div>
  );
}

async function RevenueCard() {
  const data = await db.analytics.getRevenue();
  return <div>{data}</div>;
}

Security Essentials

// 1. Always authenticate
'use server';
export async function deleteUser(id) {
  const user = await getCurrentUser();
  if (!user) throw new Error('Unauthorized');
  await db.users.delete(id);
}

// 2. Keep secrets server-side
'use server';
export async function fetchData() {
  const secret = process.env.API_SECRET; // Inside function!
  return fetch(url, { headers: { Authorization: `Bearer ${secret}` }});
}

// 3. Validate inputs
import { z } from 'zod';
const schema = z.object({ email: z.string().email() });
const result = schema.safeParse(formData);

See references/security-guide.md for complete security guidance.

Migration from React 18

1. Update to React 18.3 first (fix warnings)
2. Update to React 19: npm install react@19 react-dom@19
3. Run codemods: npx codemod@latest react/19/migration-recipe
4. Fix TypeScript: npx types-react-codemod@latest preset-19 ./src
5. Test thoroughly

Key breaking changes:

• ReactDOM.render → createRoot
• PropTypes removed → Use TypeScript
• forwardRef deprecated → Use ref as prop
• useRef() requires argument → useRef(null)

See references/upgrade-checklist.md and references/migration-patterns.md.

Quick Reference

New Hooks

| Hook | Purpose | |------|---------| | useActionState | Form state with async actions | | useOptimistic | Instant UI feedback | | use() | Read promises/context (can be conditional) | | useTransition | Non-urgent updates |

See references/hooks-api.md for detailed API docs.

When to Use What

| Task | Solution | |------|----------| | Forms | useActionState + Server Actions | | Instant UI | useOptimistic | | Data fetching | Server Components with async/await | | Refs | ref as regular prop | | Progressive rendering | Suspense boundaries |

Reference Files

• references/hooks-api.md - Complete hook documentation
• references/migration-patterns.md - Detailed migration guide
• references/advanced-examples.md - Production examples
• references/security-guide.md - Security best practices
• references/upgrade-checklist.md - Step-by-step upgrade
• references/core-workflows.md - 5 essential patterns with full examples

Resources

• React 19 Docs: https://react.dev
• Next.js 15 Docs: https://nextjs.org/docs

Version: 2.1 | Updated: 2025-12-27