React 19'daki use() API'si nedir? Diğer hook'lardan farkı nedir, hangi hatalara açıktır?

use(resource) bir Promise'in veya Context'in değerini render sırasında okur. Promise bekliyorsa bileşen en yakın <Suspense> sınırına kadar askıya alınır; reddedilirse en yakın Error Boundary hatayı yakalar.

import { use, Suspense } from "react";

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise); // resolve olana kadar suspend
  return comments.map((c) => <p key={c.id}>{c.text}</p>);
}

function Page({ commentsPromise }) {
  return (
    <Suspense fallback={<p>Yorumlar yükleniyor...</p>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  );
}

Diğer hook'lardan farkı

• Koşullu çağrılabilir: if, döngü içinde kullanılabilir (yine de sadece render sırasında, bileşen veya hook içinde).
• Context için useContext yerine kullanılabilir ve erken return'den sonra çağrılabilir.

function Badge({ show }) {
  if (!show) return null;
  const theme = use(ThemeContext); // useContext burada kural ihlali olurdu
  return <span className={theme}>Yeni</span>;
}

Yaygın hata: Promise'i render içinde oluşturmak

// YANLIŞ: her render'da yeni Promise -> sonsuz suspend döngüsü
function Bad() {
  const data = use(fetch("/api/x").then((r) => r.json()));
}

Promise sabit olmalı: Server Component'te oluşturulup prop olarak geçilmeli ya da bir cache/kütüphane (TanStack Query, framework loader'ı) tarafından saklanmalı. Client Component'te render içinde oluşturulan Promise'ler desteklenmez.

Diğer notlar

• use try/catch içinde çağrılamaz; hata için Error Boundary kullanın.
• Server Component'lerde doğrudan await daha basittir; use daha çok sunucudan client'a Promise akıtmak için kullanılır.