React 19 Stable Release: Actions, Server Components, and the New Hooks

1// Server Component (default) — runs on the server
2// No 'use client' directive needed
3import { db } from '@/lib/database';
4
5async function BlogPost({ slug }: { slug: string }) {
6  // Direct database access — no API layer needed
7  const post = await db.posts.findBySlug(slug);
8  const comments = await db.comments.findByPost(post.id);
9  
10  return (
11    <article>
12      <h1>{post.title}</h1>
13      <div>{post.content}</div>
14      {/* Client Component for interactive parts */}
15      <CommentSection initialComments={comments} postId={post.id} />
16    </article>
17  );
18}
19
20// Client Component — runs in the browser
21'use client';
22import { useState, useOptimistic } from 'react';
23
24function CommentSection({ initialComments, postId }) {
25  const [comments, setComments] = useState(initialComments);
26  // ... interactive logic
27}

1// Before React 19: Manual everything
2'use client';
3function ContactForm() {
4  const [loading, setLoading] = useState(false);
5  const [error, setError] = useState(null);
6  const [success, setSuccess] = useState(false);
7  
8  async function handleSubmit(e) {
9    e.preventDefault();
10    setLoading(true);
11    setError(null);
12    try {
13      const formData = new FormData(e.target);
14      const res = await fetch('/api/contact', {
15        method: 'POST',
16        body: formData,
17      });
18      if (!res.ok) throw new Error('Failed');
19      setSuccess(true);
20    } catch (err) {
21      setError(err.message);
22    } finally {
23      setLoading(false);
24    }
25  }
26  
27  return <form onSubmit={handleSubmit}>...</form>;
28}
29
30// React 19: Actions handle everything
31'use client';
32import { useActionState } from 'react';
33import { submitContact } from './actions';
34
35function ContactForm() {
36  const [state, formAction, isPending] = useActionState(submitContact, null);
37  
38  return (
39    <form action={formAction}>
40      <input name="email" type="email" required />
41      <textarea name="message" required />
42      <button disabled={isPending}>
43        {isPending ? 'Sending...' : 'Send'}
44      </button>
45      {state?.error && <p className="error">{state.error}</p>}
46      {state?.success && <p className="success">Message sent!</p>}
47    </form>
48  );
49}

1const [state, formAction, isPending] = useActionState(
2  async (previousState, formData) => {
3    const result = await serverAction(formData);
4    return result; // Becomes the new state
5  },
6  initialState
7);

1function TodoList({ todos }) {
2  const [optimisticTodos, addOptimistic] = useOptimistic(
3    todos,
4    (currentTodos, newTodo) => [...currentTodos, { ...newTodo, pending: true }]
5  );
6  
7  async function addTodo(formData) {
8    const todo = { title: formData.get('title') };
9    addOptimistic(todo); // Instantly shows in UI
10    await saveTodo(todo); // Server saves in background
11  }
12  
13  return (
14    <ul>
15      {optimisticTodos.map(todo => (
16        <li style={{ opacity: todo.pending ? 0.5 : 1 }}>{todo.title}</li>
17      ))}
18    </ul>
19  );
20}

1// Any component inside a <form> can access submission state
2function SubmitButton() {
3  const { pending, data, method, action } = useFormStatus();
4  return <button disabled={pending}>{pending ? 'Saving...' : 'Save'}</button>;
5}

1// Read promises directly in components
2function UserProfile({ userPromise }) {
3  const user = use(userPromise); // Suspends until resolved
4  return <h1>{user.name}</h1>;
5}
6
7// Read context without useContext
8function Theme() {
9  const theme = use(ThemeContext);
10  return <div style={{ color: theme.primary }}>Themed content</div>;
11}

1// Before React 19
2const Input = forwardRef((props, ref) => {
3  return <input ref={ref} {...props} />;
4});
5
6// React 19 — ref is just a prop
7function Input({ ref, ...props }) {
8  return <input ref={ref} {...props} />;
9}

1function BlogPost({ post }) {
2  return (
3    <>
4      <title>{post.title} | My Blog</title>
5      <meta name="description" content={post.excerpt} />
6      <meta property="og:title" content={post.title} />
7      <link rel="canonical" href={`/blog/${post.slug}`} />
8      <article>{post.content}</article>
9    </>
10  );
11}
12// React automatically hoists these to <head>

1npx codemod@latest react/19/migration-recipe