useDeferredValue

const deferredValue = useDeferredValue(value)

• Referans
  • useDeferredValue(value)
• Kullanım
  • Taze içerik yüklenirken eski içeriğin gösterilmesi
  • İçeriğin eski olduğunu belirtme
  • Kullanıcı arayüzünün bir kısmı için yeniden render’ı erteleme

Referans

useDeferredValue(value)

Belirli bir değerin ertelenmiş (deferred) versiyonunu almak için bileşeninizin en üst kapsamında useDeferredValue’ı çağırın.

import { useState, useDeferredValue } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  // ...
}

Daha fazla örnek için aşağıya bakınız.

Parametreler

• value: Ertelemek istediğiniz değerdir. Herhangi bir türden olabilir.

Dönüş değeri

İlk render esnasında, döndürülen ertelenmiş değer ile sağladığınız değer aynı olacaktır. Güncellemeler esnasında, React önce eski değerle yeniden render etmeyi dener (bu yüzden eski değeri döndürür) ve ardından arka planda yeni değer ile birlikte yeni bir render başlatır (bu yüzden güncellenmiş değeri döndürür).

Dikkat edilmesi gerekenler

• useDeferredValue’ya geçtiğiniz değerler, ilkel değer (örn. string ya da number) veya render dışında oluşturulan nesneler olmalıdır. Render esnasında yeni bir nesne oluşturur ve bunu direkt useDeferredValue’ya iletirseniz, her render’da farklı olur. Bu da gereksiz arka plan render’larına neden olacaktır.

• useDeferredValue farklı bir değer aldığında (Object.is ile karşılaştırılarak karar verilir), mevcut render’a (hala önceki değeri kullandığı) ek olarak, arkaplanda yeni değerle render planlar. Arka planda gerçekleşen bu render kesintiye uğrayabilir: value için başka bir güncelleme olursa React render’a sıfırdan başlar. Örneğin, kullanıcı formdaki girdiye ertelenmiş değeri alan grafiğin yeniden render’lanmasına fırsat vermeyecek kadar hızlı yazıyorsa, grafik yalnızca kullanıcı yazmayı bıraktıktan sonra yeniden render edilir.

• useDeferredValue, <Suspense> ile entegredir. Yeni bir değerin sebep olduğu arkaplan güncellemesi UI’yı askıya aldığında, kullanıcı fallback’i görmez. Veriler yüklenene kadar eski değeri görürler.

• useDeferredValue, tek başına ekstra ağ isteklerini engellemez.

• useDeferredValue Hook’unun sebep olduğu sabit bir gecikme yoktur. React orjinal render işlemini bitirir bitirmez, hemen yeni değerle arkaplanda render işlemine başlar. Olayların sebep olduğu güncellemeler (örn. yazma), arkaplanda yeniden render işlemini kesintiye uğratarak önceliklendirilirler.

• useDeferredValue’dan kaynaklanan arkaplan render işlemi, ekrana işlenene kadar Efektleri tetiklemez. Arka planda gerçekleşen render askıya alınırsa, Efektler veriler yüklendikten ve kullanıcı arayüzü güncellendikten sonra çalıştırılır.

Kullanım

Taze içerik yüklenirken eski içeriğin gösterilmesi

Kullanıcı arayüzünüzün bazı bölümlerinin güncellenmesini ertelemek için bileşeninizin en üst kapsamında useDeferredValue çağırın.

import { useState, useDeferredValue } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  // ...
}

İlk render esnasında, ertelenmiş değer ile sağladığınız değer aynı olacaktır.

Güncellemeler esnasında, ertelenmiş değer en son değerin “gerisinde” kalır. React ilk seferde ertelenmiş değeri güncellemeden render eder, ardından yeni değerle arka planda yeniden render işlemi planlar.

Bunun ne zaman faydalı olabileceğini görmek için bir örnek üzerinden ilerleyelim.

Bu örnekte, SearchResults bileşeni arama sonuçları çekilirken askıya alınır. "a" yazmayı deneyin. Ardından sonuçları bekleyip "ab" olarak düzenleyin. "a"’nın sonuçları, yükleme fallback’iyle değiştirilir.

Buna yaygın bir alternatif olan arayüz modeli, sonuç listesinin güncellenmesini ertelemek ve yeni sonuçlar hazır olana kadar öncekini göstermeye devam etmektir. Sorgunun ertelenmiş sürümünü aşağıya aktarmak için useDeferredValue’yu çağırın:

export default function App() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  return (
    <>
      <label>
        Albüm ara:
        <input value={query} onChange={e => setQuery(e.target.value)} />
      </label>
      <Suspense fallback={<h2>Yükleniyor...</h2>}>
        <SearchResults query={deferredQuery} />
      </Suspense>
    </>
  );
}

query hemen güncelleneceği için girdi yeni değeri gösterir. Ancak, veri yüklenene kadar deferredQuery önceki değerini korur ve SearchResults bir süre boyunca eski sonuçları göstermeye devam eder.

Aşağıdaki örnekte "a" yazın, sonuçların yüklenmesini bekleyin ve ardından girdiyi "ab" olarak düzenleyin. Yeni sonuçlar yüklenene kadar Suspense fallback’in yerine eski sonuç listesinin görüntülendiğine dikkat edin:

İçeriğin eski olduğunu belirtme

Yukarıdaki örnekte, en son sorgu için sonuç listesinin hala yüklenmekte olduğuna dair herhangi bir gösterge yoktur. Yeni sonuçların yüklenmesi zaman alıyorsa, kullanıcı için kafa karıştırıcı durumlar oluşabilir. Sonuç listesinin en son sorgu ile güncellenmediğini kullanıcıya daha belirgin hale getirmek için, eski sonuç listesi görüntülenirken görsel bir gösterge ekleyebilirsiniz:

<div style={{
  opacity: query !== deferredQuery ? 0.5 : 1,
}}>
  <SearchResults query={deferredQuery} />
</div>

Bu değişiklikle birlikte, yazmaya başladığınız anda yeni sonuç listesi yüklenene kadar eski liste karartılır. Karartmayı daha yumuşak hissettirmek için aşağıdaki örnekte olduğu gibi CSS geçiş efekti ekleyebilirsiniz:

Kullanıcı arayüzünün bir kısmı için yeniden render’ı erteleme

useDeferredValue’ı performans optimizasyonu olarak da uygulayabilirsiniz. Kullanıcı arayüzünüzün bir bölümünün yeniden işlenmesi yavaş olduğunda, optimize etmenin kolay bir yolu olmadığında ve kullanıcı arayüzünün geri kalanını engellemesini önlemek istediğinizde kullanışlıdır.

Bir metin girdinizin olduğunu ve her tuşa bastığınızda yeniden render edilen bileşeninizin (grafik ya da uzun bir liste gibi) olduğunu düşünün:

function App() {
  const [text, setText] = useState('');
  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      <SlowList text={text} />
    </>
  );
}

İlk olarak, prop’ları aynı olduğunda SlowList’in yeniden render edilmesini atlayacak şekilde optimize edin. Bunu yapmak için, memo’ya sarın:

const SlowList = memo(function SlowList({ text }) {
  // ...
});

Ancak, bu yalnızca SlowList prop’ları önceki render’dakiyle aynı ise yardımcı olur. Şu an karşılaştığınız sorun, prop’lar farklı olduklarında ve farklı çıktı göstermeniz gerektiğinde yavaş olmasıdır.

Temel performans sorunu, girdiye her yazdığınızda SlowList’in yeni prop alması ve tüm ağacın yeniden render olmasından dolayı yazmayı hantal hissettirmesidir. Bu durumda useDeferredValue, girdinin güncellenmesini (hızlı olması gerekir) sonuç listesinin güncellenmesine (daha yavaş olmasına izin verilir) göre önceliklendirmenizi sağlar:

function App() {
  const [text, setText] = useState('');
  const deferredText = useDeferredValue(text);
  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      <SlowList text={deferredText} />
    </>
  );
}

Bu değişiklik, SlowList bileşeninin yeniden render edilmesini hızlandırmaz. Fakat, React’e listenin yeniden render edilme önceliğinin düşürülebileceğini ve böylece tuşa basışları engellemeyeceğini belirtir. Liste girdinin “gerisinde kalır” ve sonra “yakalar”. Daha önce olduğu gibi, React listeyi mümkün olan en kısa sürede güncellemeye çalışır ancak bunu yaparken kullanıcının yazmaya devam etmesini engellemez.