useOptimistic

import { useOptimistic } from "@/hooks/use-optimistic";

interface Todo {
  id: string;
  title: string;
  completed: boolean;
}

function TodoList({ initialTodos }: { initialTodos: Todo[] }) {
  const [optimisticTodos, setOptimisticTodos] = useOptimistic(initialTodos);

  const addTodo = async (title: string) => {
    const newTodo = { id: crypto.randomUUID(), title, completed: false };
    setOptimisticTodos({ action: "add", item: newTodo });

    // Make API call
    await fetch("/api/todos", {
      method: "POST",
      body: JSON.stringify(newTodo),
    });
  };

  const updateTodo = async (todo: Todo) => {
    setOptimisticTodos({ action: "update", item: todo });

    await fetch(`/api/todos/${todo.id}`, {
      method: "PUT",
      body: JSON.stringify(todo),
    });
  };

  const deleteTodo = async (todo: Todo) => {
    setOptimisticTodos({ action: "delete", item: todo });

    await fetch(`/api/todos/${todo.id}`, {
      method: "DELETE",
    });
  };

  return (
    <ul>
      {optimisticTodos.map((todo) => (
        <li key={todo.id}>
          {todo.title}
          <button onClick={() => deleteTodo(todo)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}