Async/yükleme durumunu nasıl modellersin?

Question

Accepted Answer

Asenkron işlemler (API çağrıları) birden fazla olası sonuca sahiptir, bu nedenle **yalnızca verileri değil** modellemen gerekir — yükleme, başarı ve hata durumlarını temsil etmelisin. İyi modelleme, eski verileri göstermek veya geri bildirim vermemek gibi UI hatalarını önler. ## Naif yaklaşım ve onun kusurları ```js // ❌ separate booleans — can represent impossible combinations const [data, setData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); // What does { loading: true, error: "x", data: [...] } even mean? An invalid state. ``` Bağımsız bayraklar çelişkili kombinasyonlara izin verir (yükleme *ve* hata *ve* veri aynı anda) bu imkânsız olmalı — kafa karıştırıcı UI hatalarının kaynağı. ## Daha iyi: bir status enum (küçük bir durum makinesi) ```js // ✅ a single `status` makes states mutually exclusive const [state, setState] = useState({ status: "idle", data: null, error: null }); // status is one of: 'idle' | 'loading' | 'success' | 'error' async function load() { setState({ status: "loading", data: null, error: null }); try { const data = await api.get(); setState({ status: "success", data, error: null }); } catch (e) { setState({ status: "error", data: null, error: e.message }); } } ``` Tek bir `status` alanı durumları **birbirini dışlayan** kılar — hem yükleme hem de hata olamaz aynı anda. Render etme temiz bir switch olur: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## Sık atlanılan durumları unutma ```text idle — hasn't started yet (vs loading) empty — succeeded but no results (show "No items" not a blank screen) refetching— has old data AND is loading new (show data + a subtle spinner) ``` ## Sunucu verileri için en iyi yaklaşım: bir kütüphane kullan ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Sunucu durumu kütüphaneleri bu durumları (artı caching, refetch, stale-while-revalidate) kutudan çıkar durumda sağlar — genellikle elle yazılamaktan daha iyidir. ## Neden önemli Asenkron durumunu düzgün modellemek — gevşek booleluğun yerine tek bir durum olarak — UI hatalarının tüm bir sınıfını elimine eder (çelişkili durumlar, yükleme/hata/boş geri bildirim eksikliği) ve render mantığını temiz ve kapsamlı kılar. Durumların tam setini (idle, yükleme, başarı, hata, boş, yeniden yükleme) tanımak daha iyi UX'e yol açar ve sunucu durum kütüphanelerinin bunu işlediğini bilmek veri getirme kodunu basit ve güçlü tutmak için gereken şeydir.