React 19 Hooks: use() ve useOptimistic() İle Modern State Yönetimi

React 19 Neden Devrim Niteliğinde?

React 19 ile birlikte geliştirici deneyimi (DX) büyük bir sıçrama yaşıyor. Özellikle asenkron işlemler ve kullanıcı arayüzünün anında tepki vermesini sağlayan yeni hook'lar, eskiden Redux veya karmaşık context yapılarıyla kurduğumuz sistemleri tek satıra indirgiyor. Bunların en önemlilerinden ikisi: use() ve useOptimistic().

Yeni Sihirli Değnek: use() Hook'u

Eskiden bir API'den veri çekerken `useEffect` kullanmak, loading stateleri (isPending) tanımlamak zorundaydık. use() hook'u, doğrudan bir Promise'i tüketmemizi (resolve etmemizi) sağlıyor. Ayrıca geleneksel hook kurallarının aksine, koşul blokları (if) içinde çağrılmasına izin veriyor!

import { use, Suspense } from "react";

// Varsayılan fetch fonksiyonumuz
const fetchComments = async (postId) => {
  const res = await fetch(`/api/comments/${postId}`);
  return res.json();
};

function CommentSection({ commentPromise }) {
  // useEffect yok! state yok! Doğrudan Promise'i okuyoruz.
  const comments = use(commentPromise);

  return (
    <ul>
      {comments.map((c) => <li key={c.id}>{c.text}</li>)}
    </ul>
  );
}

// Ana Bileşen
export default function BlogPost({ id }) {
  const commentPromise = fetchComments(id);
  
  return (
    <div>
      <h1>Blog Yazısı Başlığı</h1>
      <Suspense fallback={<p>Yorumlar Yükleniyor...</p>}>
        <CommentSection commentPromise={commentPromise} />
      </Suspense>
    </div>
  );
}

useOptimistic() ile Gecikmeye Son

Bir eylem gerçekleştirdiğimizde (örneğin bir yorum ekleme veya beğeni butonuna basma), kullanıcının sunucunun yanıtını beklemesi UI (Kullanıcı Arayüzü) deneyimini düşürür. useOptimistic, "Sunucu işlemi muhtemelen başarılı olacak, sen şimdiden arayüzde bunu başarılıymış gibi göster" dememize olanak tanır.

import { useOptimistic } from 'react';
import { addLikeToServer } from './actions';

export default function LikeButton({ initialLikes, postId }) {
  // 1. İyimser State oluştur
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    initialLikes,
    (currentLikes, amountToAdd) => currentLikes + amountToAdd
  );

  const formAction = async () => {
    // 2. Anında arayüzü güncelle (Sunucuyu beklemeden)
    addOptimisticLike(1);
    
    // 3. Arka planda sunucuya isteği gönder
    await addLikeToServer(postId);
  };

  return (
    <form action={formAction}>
      <button type="submit">
        ❤️ {optimisticLikes} Beğeni
      </button>
    </form>
  );
}