I'm always excited to take on new projects and collaborate with innovative minds.
Kayseri/Turkey
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
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.
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;
}
);
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>
);
}
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>
);
}
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.
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.
E-posta hesabınız yayımlanmayacak. Gerekli alanlar işaretlendi *