React 19'daki useActionState, useFormStatus ve useOptimistic hook'ları ne işe yarar?

React 19, form gönderimi ve async mutasyonlar için Actions kavramını getirdi. Bu üç hook, pending/hata durumunu ve iyimser (optimistic) güncellemeyi elle useState yazmadan yönetir.

useActionState

Bir action fonksiyonunu sarar, son sonucu (state) ve bekleme durumunu döndürür.

async function updateName(prevState, formData) {
  const name = formData.get("name");
  const res = await fetch("/api/name", { method: "POST", body: formData });
  if (!res.ok) return { error: "Kaydedilemedi" };
  return { error: null, name };
}

function NameForm() {
  const [state, formAction, isPending] = useActionState(updateName, { error: null });
  return (
    <form action={formAction}>
      <input name="name" />
      <SubmitButton />
      {state.error && <p role="alert">{state.error}</p>}
    </form>
  );
}

useFormStatus

react-dom'dan gelir; üstteki `<form>`'un gönderim durumunu okur. Bu yüzden form içinde ayrı bir bileşende çağrılmalıdır.

import { useFormStatus } from "react-dom";
function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? "Kaydediliyor..." : "Kaydet"}</button>;
}

useOptimistic

İstek sürerken UI'ı hemen güncel gösterir; action bitince gerçek state'e döner (hata olursa iyimser değer otomatik kaybolur).

const [optimisticTodos, addOptimistic] = useOptimistic(
  todos,
  (current, newTodo) => [...current, { ...newTodo, sending: true }]
);

async function action(formData) {
  addOptimistic({ text: formData.get("text") });
  await saveTodo(formData);
}

Bu hook'lar Next.js Server Actions ile de birlikte çalışır; JavaScript yüklenmeden önce de formun çalışması (progressive enhancement) mümkündür.