I'm always excited to take on new projects and collaborate with innovative minds.

Address

Kayseri/Turkey

Sosyal Bağlantılar

useOptimistic() Hook’un Kullanımı

useOptimistic() Hook, yazılımda kullanıcıların bir işlem yaptıktan hemen sonra sonucu görmesini sağlayan bir yöntemdir. Normalde bir değişiklik sunucuya gönderilip onay alınana kadar beklenir. useOptimistic() sayesinde, değişiklik anında ekranda gösterilir ve sunucu onayı gelmese bile kullanıcı “işlem gerçekleşti” gibi bir deneyim yaşar. Böylece uygulama daha hızlı ve akıcı hissedilir. Özetle, kul

useOptimistic() Hook’un Kullanımı

React 19 ile gelen useOptimistic kancası, UI'yi sunucu yanıtını beklemeden güncelleyerek kullanıcı deneyimini hızlandırır. Kısa ve çözüm odaklı bir yaklaşım: Kod örnekleriyle anlatacağım, her adımda ne yaptığını açıklayarak.

Ne İşe Yarar?

  • Sorun: Kullanıcı bir eylem yapar (örneğin todo ekler), sunucu gecikmesiyle UI donar.
  • Çözüm: UI'yi "iyimser" olarak hemen güncelle, hata olursa geri al. Bu, useState ile manuel yönetmek yerine otomatik rollback sağlar.

Temel kullanım:

const [optimisticState, addOptimistic] = useOptimistic(
  initialState,  // Başlangıç verisi (örneğin todos listesi)
  (state, action) => {  // Güncelleme fonksiyonu: Yeni hali hesapla
    if (action.type === 'addTodo') {
      return [...state, action.newTodo];  // Listeye hemen ekle
    }
    return state;
  }
);
 
 
  • Ne yapıyor? optimisticState her zaman güncel hali gösterir. addOptimistic({ type: 'addTodo', newTodo }) çağırınca UI anında değişir, sunucu hatası olursa otomatik eski hale döner.

Neden Kullanmalısın?

  • UI'yi responsive yapar: Kullanıcı beklemez, anında feedback alır.
  • Hata yönetimi kolay: Sunucu başarısız olursa rollback otomatik.
  • Next.js ile entegre: Server Actions + revalidateTag ile veri senkronu.

Örnek: Todo Listesi Uygulaması

Bir todo app yapalım. Sunucudan todos çek, yeni ekle ve iyimser güncelle.

1. Sayfa Bileşeni (page.jsx - Server Component):

 
import { getTodos } from '@/utils';
import TodoList from '@/components/TodoList';

export default async function TodoApp() {
  const todos = await getTodos();  // Sunucudan veriyi çek (cache'le)
  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <h1 className="text-2xl font-bold mb-4">Todo Listesi</h1>
      <TodoList todos={todos} />  // Client bileşene geçir
    </div>
  );
}
 
 
  • Ne yapıyor? Veriyi server-side fetch eder, client'a aktarır. Hızlı yükleme için cache tag'leri kullan.

2. TodoList Bileşeni (TodoList.tsx - Client Component):

 
'use client';
import { useOptimistic, useRef } from 'react';
import { createNewTask } from '@/utils';

export default function TodoList({ todos }: { todos: Todo[] }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,  // Başlangıç: Sunucu verisi
    (state, newTodo: Todo) => [...state, newTodo]  // İyimser: Listeye ekle
  );

  const formRef = useRef<HTMLFormElement>(null);

  const handleSubmit = async (formData: FormData) => {
    const content = formData.get('content') as string;
    const newTodo: Todo = { content, isCompleted: false };  // Yeni todo oluştur
    
    addOptimisticTodo(newTodo);  // UI'yi hemen güncelle (iyimser)
    
    try {
      await createNewTask(content);  // Sunucuya gönder
      formRef.current?.reset();  // Formu temizle
    } catch (error) {
      // Hata olursa useOptimistic otomatik rollback yapar
      console.error('Todo eklenemedi:', error);
    }
  };

  return (
    <div>
      <form action={handleSubmit} ref={formRef} className="mb-4 flex gap-2">
        <input name="content" placeholder="Yeni todo ekle" className="flex-1 p-2 border" />
        <button type="submit" className="px-4 py-2 bg-blue-500 text-white">Ekle</button>
      </form>
      <ul>
        {optimisticTodos.map((todo, idx) => (
          <li key={idx} className="p-2 border-b">{todo.content}</li>
        ))}
        {optimisticTodos.length === 0 && <p>Henüz todo yok.</p>}
      </ul>
    </div>
  );
}
 
 
  • Ne yapıyor?
    • useOptimistic ile listeyi başlatır.
    • Form submit'te: Önce UI'yi ekler (hızlı feedback), sonra sunucuya yollar.
    • Hata? Otomatik eski listeye döner. Başarılı? revalidateTag ile cache yenilenir.

3. Utils (utils.ts - API İşlemleri):

 
const API_URL = '/api/todos';

export async function getTodos() {
  const res = await fetch(API_URL, { 
    next: { tags: ['todos'] }  // Cache tag'i
  });
  return res.json();
}

export async function createNewTask(content: string) {
  const res = await fetch(API_URL, {
    method: 'POST',
    body: JSON.stringify({ content }),
    headers: { 'Content-Type': 'application/json' }
  });
  if (!res.ok) throw new Error('Hata');
  revalidateTag('todos');  // Cache'i yenile, UI'yi güncelle
  return res.json();
}
 
  • Ne yapıyor? Fetch ile veri çeker/post eder. revalidateTag sunucu verisini taze tutar, iyimser güncellemeyle senkronize eder.

    1-frrgdcaujcjj3bxwpvqlig.gif

Sonuç ve İpuçları

Bu setup'la todo app'in anında responsive olur: Kullanıcı ekler, UI hemen gösterir, sunucu onaylar veya geri alır. Denemek için Next.js 14+ kur, React 19 canary ekle.

4 dakika okuma
Eyl 12, 2025
Ahmet Yüceler
Paylaş

yorum Yap

E-posta hesabınız yayımlanmayacak. Gerekli alanlar işaretlendi *