React: How to implement optimistic updates with React 19?

1import { useOptimistic } from "react";
2
3interface Todo {
4  id: number;
5  text: string;
6  done: boolean;
7  pending?: boolean;
8}
9
10function TodoList({ todos, addTodo }: { todos: Todo[]; addTodo: (text: string) => Promise<void> }) {
11  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
12    todos,
13    (state, newText: string) => [
14      ...state,
15      { id: Date.now(), text: newText, done: false, pending: true },
16    ]
17  );
18
19  const handleSubmit = async (formData: FormData) => {
20    const text = formData.get("text") as string;
21    addOptimisticTodo(text);
22    await addTodo(text);
23  };
24
25  return (
26    <div>
27      {optimisticTodos.map(todo => (
28        <div key={todo.id} className={todo.pending ? "pending" : ""}>
29          {todo.text}
30          {todo.pending && <span className="spinner" />}
31        </div>
32      ))}
33      <form action={handleSubmit}>
34        <input name="text" placeholder="New todo" />
35        <button type="submit">Add</button>
36      </form>
37    </div>
38  );
39}

1function LikeButton({ liked, likePost }) {
2  const [optimisticLiked, setOptimisticLiked] = useOptimistic(
3    liked,
4    (_, newValue) => newValue
5  );
6
7  const handleClick = async () => {
8    setOptimisticLiked(!optimisticLiked);
9    await likePost();
10  };
11
12  return (
13    <button onClick={handleClick}>
14      {optimisticLiked ? "❤️" : "🤍"}
15    </button>
16  );
17}