React: Explain React 19 useOptimistic hook

useOptimistic shows optimistic state while an async action is in progress. The UI updates immediately when the user acts, then reverts or updates to the real state when the server responds.

How it works:

1. User triggers an action (e.g., adds a todo)
2. addOptimistic() is called — UI updates instantly with the optimistic state
3. The async action (server request) runs in the background
4. When the action completes, React replaces the optimistic state with the real state
5. If the action fails, the optimistic state reverts to the previous state

Complete code example:

1import { useOptimistic } from "react";
2
3interface Todo {
4  id: string;
5  text: string;
6  done: boolean;
7  pending?: boolean;
8}
9
10function TodoList({
11  todos,
12  addTodo,
13}: {
14  todos: Todo[];
15  addTodo: (text: string) => Promise<void>;
16}) {
17  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
18    todos,
19    (state: Todo[], newTodoText: string) => [
20      ...state,
21      {
22        id: "temp-" + Date.now(),
23        text: newTodoText,
24        done: false,
25        pending: true,
26      },
27    ]
28  );
29
30  const handleSubmit = async (formData: FormData) => {
31    const title = formData.get("title") as string;
32    addOptimisticTodo(title); // Show immediately
33    await addTodo(title); // Server action
34  };
35
36  return (
37    <div>
38      <form action={handleSubmit}>
39        <input name="title" placeholder="New todo..." required />
40        <button type="submit">Add</button>
41      </form>
42      <ul>
43        {optimisticTodos.map(todo => (
44          <li
45            key={todo.id}
46            style={{ opacity: todo.pending ? 0.5 : 1 }}
47          >
48            {todo.text}
49            {todo.pending && <span> (saving...)</span>}
50          </li>
51        ))}
52      </ul>
53    </div>
54  );
55}

Parameters:

1. state — the current state (from server or parent component)
2. updateFn(currentState, optimisticValue) — function that returns the optimistic state

Returns:

1. optimisticState — state with optimistic updates applied
2. addOptimistic(optimisticValue) — function to trigger the optimistic update

Use cases:

• Like/heart buttons — show the heart immediately while the server processes
• Todo/task additions — show the new item before server confirms
• Chat messages — show sent message immediately
• Shopping cart — add items instantly, sync with server in background

Key benefits:

• Instant UI feedback — no loading spinners for quick actions
• Automatic revert — if the server fails, the UI goes back to the previous state
• Seamless integration — works naturally with React Server Components and Actions