İyimser Güncellemeleri Elle Uygulama

Elle yapılan iyimser güncellemeler, sunucu verilerinden başlatılan yerel bileşen durumuyla başlar: const [items, setItems] = useState(serverItems). Görüntülediğiniz ve iyimser biçimde değiştireceğiniz durum budur. Sunucudan alınan verileri doğrudan değiştirmemelisiniz (NOT); denetiminizde tutacağınız yerel bir kopya oluşturun.

Kullanıcı bir değişiklik işlemini ("Ekle", "Beğen", "Sil" düğmesine tıklayarak) başlattığında, API'yi çağırmadan önce durumu hemen güncelleyin: setItems(prev => [...prev, newItem]). Kullanıcı arayüzü değişikliği anında yansıtır. Gerçek ağ isteğini ancak bu güncellemeden sonra gönderin.

İyimser güncellemeyi yapmadan önce mevcut durumu yakalayın: const previousItems = items. Bu anlık görüntü, geri alma hedefinizdir. API çağrısı başarısız olursa bu değeri geri yüklersiniz. Yalnızca bekleyen değişiklik işlemi süresince gerektiği için bunu duruma değil, bir değişkene kaydedin.

İyimser güncellemeden sonra API çağrısını eşzamansız olarak gerçekleştirin. Bunu try/catch içine alın. Başarılı olursa sunucu durumuyla eşitlemek için isteğe bağlı olarak verileri yeniden çekebilir veya sunucunun aynı verileri döndüreceğine güvenerek iyimser durumu koruyabilirsiniz. Başarısız olursa yakaladığınız önceki durumu kullanarak geri alma işlemi yapın.

Değişiklik işleminizin catch bloğunda şunu kullanın: setItems(previousItems). Bu, durumu iyimser güncellemeden önceki hâline getirir. Geri alma işleminin ardından bir hata bildirimi gösterin. Kullanıcılar nadir görülen başarısızlıkların yaşanabileceğini anlar; kabul edemedikleri şey, sessiz bir tutarsızlıktır.

Geri alma işleminden sonra şu hata mesajını gösterin: "Değişiklikler kaydedilemedi. Lütfen yeniden deneyin." Aynı değişiklik işlemini yeniden başlatan bir Yeniden Dene düğmesi ekleyin. Bu, kullanıcıya kontrol olanağı verir. Geri alma + hata bildirimi + yeniden deneme birleşimi, tüm arayüzü kilitlemeden başarısızlık durumunu zarif biçimde ele alır.

Yeni bir öğeyi iyimser olarak eklediğinizde sunucu henüz gerçek bir kimlik atamamıştır. İyimser öğe için geçici bir kimlik oluşturun: const tempId = crypto.randomUUID(). Bunu listedeki öğenin anahtarı olarak kullanın. API başarıyla yanıt verdikten sonra geçici kimliği sunucunun atadığı gerçek kimlikle değiştirin.

Başarılı bir oluşturma işleminin ardından sunucu gerçek kimlikle yanıt verir. Geçici öğeyi değiştirmek için durumu güncelleyin: setItems(prev => prev.map(item => item.id === tempId ? { ...item, id: serverResponse.id } : item)). Bu uzlaştırma, sonraki işlemlerde doğru sunucu kimliğinin kullanılmasını sağlar.

Kullanıcı kısa süre içinde iki değişiklik işlemi başlatırsa yanıtlar sıraları dışında ulaşabilir. İkinci değişiklik işleminin yanıtı birinciden önce gelebilir ve birincinin geri alınması, ikinciden gelen doğru durumun üzerine yazabilir. Bu, iyimser kullanıcı arayüzüne özgü bir yarış koşuludur.

Yarış koşullarını çözmenin bir yolu, değişiklik işlemlerini bir kuyruk kullanarak sıraya almaktır. Bir değişiklik işlemi devam ederken tetikleyici düğmesini devre dışı bırakın (isSubmitting durumunu true olarak ayarlayarak). Sonraki değişikliğe yalnızca önceki işlem tamamlandıktan sonra izin verin. Bu yaklaşım yanıt verme hızının bir kısmından ödün verir ancak durumların doğru sırayla güncellenmesini garanti eder.

Silme işlemleri için önceki öğeleri saklayın, silinen öğeyi durumdan filtreleyerek çıkarın, silme API'sini çağırın ve başarısızlık durumunda geri alın. Silme, oluşturma işleminden daha basittir (ID'leri uzlaştırmanız gerekmez), ancak aynı ilkeler burada da geçerlidir. API çağrısını yapmadan önce bir "geri al" seçeneği göstermek için silme işleminden önce kısa bir gecikme eklemeyi değerlendirin.

İyimser olarak eklenen öğelerin neden geçici bir ID'ye ihtiyacı vardır?

El ile kullanılan desen şöyledir: previousItems değerini saklayın, yeni durumla setItems çağrısı yapın, API çağrısını gerçekleştirin, başarısızlık durumunda setItems(previousItems) ile geri alın ve bir hata gösterin. Ekleme işlemlerinde geçici ID olarak crypto.randomUUID() kullanın ve işlem başarılı olduğunda bu ID'yi sunucu ID'siyle uzlaştırın. Devam eden değişiklik işlemleri sırasında tetikleyiciyi devre dışı bırakarak yarış koşullarını önleyin. Geri alma + bildirim + yeniden deneme, başarısızlık durumunda standart kullanıcı deneyimidir.