useTransition ve useDeferredValue gibi concurrent özellikler nelerdir?

Question

Accepted Answer

Concurrent React, **rendering işini kesebilir, duraklatabilir ve öncelik verebilir**. Bazı güncelleme işlemlerini **acil olmayan transitions** olarak işaretlersiniz, böylece acil güncelleme işlemleri (yazma gibi) ağır bir yeniden render beklemede olsa bile yanıt verilebilir kalır.

## useTransition

```jsx
const [isPending, startTransition] = useTransition();

function onChange(e) {
  setQuery(e.target.value);          // URGENT: keep the input snappy
  startTransition(() => {
    setResults(filterBigList(e.target.value)); // NON-URGENT: can be interrupted
  });
}
// isPending lets you show a subtle "updating…" indicator
```

**Neden yardımcı olur:** Büyük bir listeyi filtrelemek pahalıdır. Transition olmadan, React binlerce satırı yeniden render ederken girdiye erişimi engeller, bu da yazma işlemini gecikmiş hissettirir. Pahalı güncelleme işlemini `startTransition` içine sararak, React giriş güncellemelerini yüksek öncelik olarak tutar ve başka bir tuşa basarsanız devam etmekte olan filtre render işlemini **atabilir** — eski, donuk çerçeveler olmaz.

## useDeferredValue

Setter'ı kontrol etmediğiniz zaman daha basit bir alternatif — size bir değerin "gecikmeli" bir kopyasını verir:

```jsx
const deferredQuery = useDeferredValue(query); // updates after urgent work settles
const results = useMemo(() => filterBigList(deferredQuery), [deferredQuery]);
```

## Neden önemli

Hızlı kullanıcı girişiyle yürütülen **pahalı, acil olmayan UI güncellemeleri** için bunları kullanın: büyük veri kümelerine yazarken arama, ağır içerik render eden sekme anahtarları, büyük filtrelenmiş/sıralanmış tablolar. Basit uygulamalar için gereksizdir — bir render, görünür giriş gecikmesine neden olmaya yeterince ağır olduğunda parlıyorlar.