React Render Optimizasyonu: useDeferredValue ve useTransition

React Render Optimizasyonu: useDeferredValue ve useTransition

Merhaba! Ben Fatih Soysal ve bugün size React uygulamalarınızın performansını artırmak için kullanabileceğiniz iki harika hook’tan, useDeferredValue ve useTransition‘dan bahsedeceğim. Bu hook’lar, özellikle kullanıcı arayüzünde sık güncellemelerin olduğu durumlarda, performans sorunlarını çözmek için oldukça etkilidir. Örneğin, uzun bir listeyi filtrelerken veya büyük bir veri kümesini işlerken, arayüzün donmasını veya yavaşlamasını engellemek için bu hook’ları kullanabilirsiniz. Bu makalede, bu hook’ların nasıl çalıştığını, ne zaman kullanmanız gerektiğini ve örneklerle birlikte nasıl uygulayabileceğinizi detaylı bir şekilde ele alacağız.

useDeferredValue: Gecikmeli Değer Güncellemeleri

useDeferredValue hook’u, bir değerin güncellenmesini belirli bir süre geciktirebilir. Bu, arayüzün sürekli güncellenmesini önleyerek performansı önemli ölçüde artırır. Örneğin, kullanıcı bir arama kutusuna metin yazarken, her karakter değişikliği için arayüzün güncellenmesi yerine, useDeferredValue ile bu güncellemeyi bir süre erteleyebilir ve yalnızca kullanıcı yazmayı bıraktıktan sonra arayüzü güncelleyebilirsiniz. Bu sayede, gereksiz render işlemlerinin önüne geçmiş olursunuz.

import { useDeferredValue } from 'react';

function MyComponent() {
  const [value, setValue] = useState('');
  const deferredValue = useDeferredValue(value, { timeoutMs: 300 }); // 300ms gecikme

  return (
    <div>
      <input type="text" value={value} onChange={e => setValue(e.target.value)} />
      <p>Gecikmeli Değer: {deferredValue}</p>
    </div>
  );
}

Yukarıdaki örnekte, timeoutMs parametresi ile gecikme süresini 300 milisaniye olarak ayarladık. Kullanıcı yazmaya devam ettiği sürece, arayüz deferredValue‘nin değerini kullanarak güncellenir ve bu güncellemeler 300 milisaniye geciktirilir. Kullanıcı yazmayı bıraktığında ise, value ile deferredValue aynı olur ve güncelleme anında gerçekleşir.

useTransition: Sıralı Geçişler

useTransition hook’u, uzun süren işlemleri arka planda çalıştırırken, arayüzün donmasını engeller. Bu hook, bir işlev alır ve bu işlevin çalışmasını bir “başlatıcı” ile tetikler. İşlem çalışırken, bir yüklenme göstergesi veya benzeri bir UI elemanı gösterilebilir. İşlem tamamlandığında ise arayüz güncellenir. Bu sayede, kullanıcılar işlem tamamlanana kadar arayüzün donmadığını görür ve daha akıcı bir deneyim yaşarlar.

import { useTransition } from 'react';

function MyComponent() {
  const [isPending, startTransition] = useTransition();
  const [data, setData] = useState([]);

  const fetchData = () => {
    startTransition(() => {
      // Uzun süren işlem (örneğin, API çağrısı)
      fetch('/api/data')
        .then(res => res.json())
        .then(data => setData(data));
    });
  };

  return (
    <div>
      <button onClick={fetchData}>Verileri Yükle</button>
      {isPending && <p>Yükleniyor...</p>}
      {data.map(item => <p key={item.id}>{item.name}</p>)}
    </div>
  );
}

Bu örnekte, fetchData fonksiyonu, startTransition ile sarmalanmıştır. Bu, veri yükleme işleminin arka planda çalışmasını sağlar ve isPending değişkeni ile yüklenme durumunu takip edebiliriz. Yüklenirken bir “Yükleniyor…” mesajı gösterilir ve işlem tamamlandığında data güncellenir.

Sonuç

useDeferredValue ve useTransition, React uygulamalarınızın performansını önemli ölçüde artırabilecek güçlü hook’lardır. Özellikle büyük veri kümeleriyle çalışırken veya kullanıcı etkileşimlerinin yoğun olduğu uygulamalarda, bu hook’ları kullanarak kullanıcı deneyimini iyileştirebilir ve uygulamanızın daha hızlı ve daha duyarlı olmasını sağlayabilirsiniz. Daha fazla bilgi ve örnek için buraya bakabilirsiniz. Ayrıca, React performans optimizasyonu hakkında daha fazla bilgi edinmek için kendi sitemi fatihsoysal.com‘u ziyaret edebilirsiniz.

#Etiketler: React, useDeferredValue, useTransition, Performans Optimizasyonu, React Hook’ları, Render Optimizasyonu, Kullanıcı Deneyimi, JavaScript