Hafif React Async Veri Çekme ve Önbellekleme Hook’u

Hafif React Async Veri Çekme ve Önbellekleme Hook’u

React uygulamalarında veri çekmek ve önbelleğe almak, performans için kritik öneme sahiptir. Bu yazıda, asenkron veri çekme ve önbellekleme işlemlerini kolaylaştıran, hafif ve özelleştirilebilir bir React hook’unun nasıl oluşturulacağını adım adım inceleyeceğiz. Aynı zamanda, bu hook’un kullanımını ve avantajlarını detaylı örneklerle göstereceğiz.

Hook’un Yapısı ve Mantığı

Öncelikle, temel mantığı anlamak için hook’umuzun yapısına bir göz atalım. Bu hook, verileri bir fetch çağrısıyla çeker ve sonucu bir önbellekte saklar. Ardından, aynı veriler için tekrarlanan çağrılar önbelleğe alınmış sonuçları doğrudan kullanır. Bu, gereksiz isteklerden kaçınarak performansı önemli ölçüde artırır. Ayrıca, hata yönetimi ve yükleme durumu gibi önemli durumları da yönetir. Bu sayede, kullanıcı deneyimi de olumlu etkilenir.

import { useState, useCallback, useEffect } from 'react';

const useAsyncData = (url, options = {}) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [cache, setCache] = useState({});

  const fetchData = useCallback(async () => {
    setLoading(true);
    setError(null);

    try {
      if (cache[url]) {
        setData(cache[url]);
      } else {
        const response = await fetch(url, options);
        const jsonData = await response.json();
        setData(jsonData);
        setCache((prevCache) => ({ ...prevCache, [url]: jsonData }));
      }
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  }, [url, options, cache]);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return { data, loading, error };
};

export default useAsyncData;

Yukarıdaki kodda, useCallback ve useEffect hook’larını kullanarak performans optimizasyonları yapıyoruz. useCallback, fetchData fonksiyonunu bellekte tutar ve gereksiz yeniden oluşturulmalarını önler. useEffect, bileşen ilk kez render edildiğinde ve bağımlılıklar değiştiğinde fetchData fonksiyonunu çalıştırır. Bu sayede, veriler ilk render’da çekilir ve daha sonraki değişiklikler sonucunda da güncellenir. Ayrıca, hata durumlarını ve yükleme durumunu takip ederek kullanıcıya geri bildirim sağlıyoruz.

Hook’un Kullanımı

Bu hook’u kullanmak oldukça basittir. Sadece URL’yi ve isteğe bağlı seçenekleri (örneğin, HTTP başlıkları) parametre olarak geçirmeniz yeterlidir. Sonrasında, data, loading ve error değişkenlerini kullanarak uygulamanızda verileri işleyecektir.

import useAsyncData from './useAsyncData';

const MyComponent = () => {
  const { data, loading, error } = useAsyncData('https://api.example.com/data');

  if (loading) return 
Yükleniyor...
;
  if (error) return 
Hata oluştu: {error.message}
;
  if (!data) return 
Veri yok
;

  return (
    

      {data.map((item) => (
        
{item.name}
      ))}
    
  );
};

Bu örnekte, useAsyncData hook’u ‘https://api.example.com/data’ URL’sinden veri çekmek için kullanılır. Yükleme durumu, hata durumu ve veri kullanılarak koşullu render işlemleri gerçekleştirilir. Veriler başarıyla çekildiğinde, liste öğeleri olarak gösterilir.

Avantajlar ve Sonuç

Bu hafif hook, React uygulamalarınızda veri çekme ve önbellekleme işlemlerini basitleştirir ve performansı artırır. Tekrarlayan istekleri önleyerek, uygulamanızın daha hızlı ve verimli çalışmasını sağlar. Ayrıca, hata yönetimi ve yükleme durumunu entegre ederek, daha iyi bir kullanıcı deneyimi sunar. Bu hook’u kendi projelerinizde kullanarak, kodunuzun daha temiz ve okunabilir olmasını sağlayabilirsiniz. Daha fazla bilgi için fatihsoysal.com sitesini ziyaret edebilirsiniz. Başka bir faydalı kaynak için de buraya bakabilirsiniz.

#Etiketler: React, hook, async, veri çekme, önbellek, caching, performans, javascript, örnekler, tutorial, önbelleğe alma, asenkron, veri işleme