Actions ve async güncellemeler

Action Nedir

Bir butona basıldığında sunucuya istek atıp sonucu göstermek için eskiden üç state yazılırdı: isPending, error, data. React 19 bunu Action kavramıyla toplar: startTransition içinde çalışan, async olabilen bir fonksiyon.¹²

import { useTransition } from "react";

function AddToCartButton({ productId }: { productId: string }) {
  const [isPending, startTransition] = useTransition();

  return (
    <button
      disabled={isPending}
      onClick={() => {
        startTransition(async () => {
          await addToCart(productId);
        });
      }}
    >
      {isPending ? "Ekleniyor..." : "Sepete ekle"}
    </button>
  );
}

React, Action bitene kadar isPending'i true tutar, arayüzü kilitlemez ve Action içinde fırlatılan hatayı en yakın Error Boundary'ye iletir.¹

useTransition'ın performans tarafı (yavaş bir listeyi bloklamadan filtrelemek) React'te render performansı dersinde.

Form Action'ı

<form>'un action prop'una bir fonksiyon verdiğinizde React onu form gönderilince FormData ile çağırır. onSubmit'ten farkı: bir transition içinde çalışır, preventDefault gerekmez ve başarılı olunca kontrolsüz (uncontrolled) alanları sıfırlar.³

<form action={async (formData) => {
  await subscribe(String(formData.get("email")));
}}>
  <input name="email" type="email" required />
  <SubmitButton />
</form>

Butonun formun gönderildiğini bilmesi için prop geçirmenize gerek yok. useFormStatus, içinde çağrıldığı üst formun durumunu okur:⁴

import { useFormStatus } from "react-dom";

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? "Gönderiliyor..." : "Abone ol"}</button>;
}

useFormStatus aynı component'teki <form>'u değil, ebeveyndeki formu görür; bu yüzden buton ayrı bir component olmalıdır.⁴

useActionState: Action'ın Sonucu

Action'ın bir sonucu varsa (hata mesajı, uygulanan indirim) useActionState kullanın. Bir önceki state'i ve gönderilen veriyi alıp yeni state döndüren async bir reducer gibi çalışır.⁵

import { useActionState } from "react";

type CouponState = { error: string | null; discount: number };

async function applyCoupon(_prev: CouponState, formData: FormData): Promise<CouponState> {
  const result = await checkCoupon(String(formData.get("code")));
  if (!result.ok) return { error: "Kupon geçersiz.", discount: 0 };
  return { error: null, discount: result.discount };
}

export function CouponForm() {
  const [state, formAction, isPending] = useActionState(applyCoupon, {
    error: null,
    discount: 0,
  });

  return (
    <form action={formAction}>
      <input name="code" aria-label="Kupon kodu" />
      <button disabled={isPending}>Uygula</button>
      {state.error && <p role="alert">{state.error}</p>}
      {state.discount > 0 && <p>%{state.discount} indirim uygulandı.</p>}
    </form>
  );
}

Aynı Action birden fazla kez tetiklenirse React çağrıları sırayla çalıştırır; her çağrı bir öncekinin sonucunu alır.⁵

useOptimistic: Cevabı Beklemeden Göstermek

Kullanıcı favori butonuna bastığında sunucuyu beklemeden kalbi doldurmak istersiniz. useOptimistic, Action sürerken geçici bir değer gösterir. Action bitince değer kendiliğinden gerçek kaynağa döner; istek başarısız olduysa iyimser değer kaybolur.⁶

import { useOptimistic, useTransition } from "react";

function FavoriteButton({ isFavorite, action }: FavoriteButtonProps) {
  const [optimisticFavorite, setOptimisticFavorite] = useOptimistic(isFavorite);
  const [, startTransition] = useTransition();

  return (
    <button
      aria-pressed={optimisticFavorite}
      onClick={() => {
        startTransition(async () => {
          setOptimisticFavorite(!optimisticFavorite);
          await action(!optimisticFavorite);
        });
      }}
    >
      {optimisticFavorite ? "Favorilerde" : "Favorilere ekle"}
    </button>
  );
}

setOptimistic... yalnızca bir Action içinde çağrılır; dışında çağrılırsa React uyarır.⁶ Server state'i TanStack Query ile yönetiyorsanız iyimser güncellemenin kütüphane tarafı TanStack Query rehberinde.

action Prop'u ile Component Tasarımı

Yukarıdaki FavoriteButton, prop'unu onClick değil action diye adlandırıyor. React dokümanı bu kalıbı önerir: tasarım sisteminizdeki buton, sekme ve select gibi component'ler action prop'u alır, kendi içinde startTransition'ı çağırır ve bekleme durumunu kendisi gösterir. Ürün kodu yalnızca await eder.⁷

Ricky Hanlon React Conf 2025'teki "Async React" konuşmasının demosunda bu fikri sonuna kadar götürür: router transition'ları, veri katmanı Suspense'i, tasarım component'leri action prop'larını ve iyimser güncellemeleri varsayılan olarak kullanır. Sonuç: ağ hızlıyken hiç yükleme durumu görünmez, yavaşken otomatik olarak görünür.⁸⁹

Bu Ders ve Formlar Rehberi

Bu derste React'in kendi araçlarını gördünüz. Alan bazlı doğrulama, Zod şeması, maskeleme ve çok adımlı formlar Formlar rehberinde; Action'ın sunucuda çalışan hâli (Server Functions) Next.js rehberinin Server Actions dersinde.

Kendin Dene

• AddToCartButton'ın addToCart'ına 2 saniyelik gecikme ekleyin ve butona hızlıca üç kez basın.

• CouponForm'da checkCoupon'ı "SALE10" dışındaki her kodu reddedecek şekilde yazın; hata ve başarı mesajlarını deneyin.

• FavoriteButton'ın action'ını her seferinde hata fırlatacak şekilde değiştirin. Kalp ne yapıyor?

• Bir Action içinde await'ten sonra setState çağırın; ardından onu startTransition ile sarın ve farkı gözlemleyin.

Detaylı Öğrenmek İçin

• Resmi doküman: useTransition referansı; Action'lar, action prop'u açmak, istenmeyen yükleme göstergelerini önlemek ve sorun giderme.¹

• Video: Ricky Hanlon'ın "Async React" konuşmasının iki bölümü (React Conf 2025).⁸¹⁰

• Repo: Konuşmanın demo uygulaması; ağ hızını değiştirip farkı kendiniz görebilirsiniz.⁹

• Resmi doküman: useActionState ve useOptimistic referansları; sepet örneği üzerinden bekleme, hata ve iyimser durumu adım adım gösterir.⁵⁶