Q318: What are the key features introduced in React 19? - React & Modern Frontend (445 Qs)

React 19 (released 2024) brings major improvements for full-stack React applications:

1. React Compiler (formerly React Forget)

Automatic memoization - no more manual useMemo, useCallback, or React.memo needed!

jsx

// Before: Manual optimization
const memoizedValue = useMemo(() => expensiveCalc(a, b), [a, b]);

// React 19: Compiler does it automatically
const value = expensiveCalc(a, b); // Automatically optimized!

2. Server Actions

Call server functions directly from components:

jsx

async function createPost(formData) {
'use server'
const post = await db.posts.create({
  title: formData.get('title')
});
revalidatePath('/posts');
return post;
}

function NewPost() {
return (
  <form action={createPost}>
    <input name="title" />
    <button type="submit">Create</button>
  </form>
);
}

3. Actions & Form Actions

Automatic handling of pending states, errors, and optimistic updates:

jsx

function Form() {
const [state, formAction] = useFormState(serverAction, initialState);
const { pending } = useFormStatus();

return (
  <form action={formAction}>
    <input disabled={pending} />
    <button disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  </form>
);
}

4. use() Hook

Read resources (Promises, Context) inside render:

jsx

function User({ userPromise }) {
const user = use(userPromise); // Suspends until resolved
return <div>{user.name}</div>;
}

5. useOptimistic Hook

Implement optimistic UI updates:

jsx

function TodoList({ todos }) {
const [optimisticTodos, addOptimisticTodo] = useOptimistic(
  todos,
  (state, newTodo) => [...state, { ...newTodo, pending: true }]
);

async function createTodo(title) {
  addOptimisticTodo({ id: Date.now(), title });
  await saveTodo(title);
}

return optimisticTodos.map(todo => (
  <Todo key={todo.id} {...todo} />
));
}

6. Document Metadata

Built-in support for <title>, <meta>, etc.:

jsx

function BlogPost({ post }) {
return (
  <>
    <title>{post.title}</title>
    <meta name="description" content={post.excerpt} />
    <article>{post.content}</article>
  </>
);
}

7. Asset Loading APIs

Preload resources for better performance:

jsx

import { preload, preinit } from 'react-dom';

preload('/font.woff2', { as: 'font' });
preinit('/script.js', { as: 'script' });