React Suspense Yüklenme Durumu Kompozisyon Ağacı: İç İçe Yükleme Yönetimi

React Suspense, başta veri çekme olmak üzere asenkron işlemleri daha zarif bir şekilde ele almak için sunulan güçlü bir özelliktir. Veri yüklenmesini beklerken bir bileşenin render edilmesini "askıya almanıza" ve bu sırada bir yedek arayüz (fallback UI) göstermenize olanak tanır. Bu, arayüzün farklı bölümlerinin çeşitli kaynaklardan gelen asenkron verilere dayandığı karmaşık bileşen ağaçlarıyla uğraşırken özellikle kullanışlıdır. Bu makale, Suspense'in iç içe bileşen yapılarında etkili bir şekilde kullanımını, sık karşılaşılan zorlukları ele alarak ve pratik örnekler sunarak derinlemesine inceleyecektir.

React Suspense'i ve Faydalarını Anlamak

İç içe senaryolara dalmadan önce, React Suspense'in temel kavramlarını özetleyelim.

React Suspense Nedir?

Suspense, bir kodun yüklenmesini "beklemenize" ve beklerken görüntülenecek bir yüklenme durumunu (fallback) bildirimsel olarak belirtmenize olanak tanıyan bir React bileşenidir. Tembel yüklenen (lazy-loaded) bileşenlerle (React.lazy kullanarak) ve Suspense ile entegre olan veri çekme kütüphaneleriyle çalışır.

Suspense Kullanmanın Faydaları:

• Geliştirilmiş Kullanıcı Deneyimi: Boş bir ekran yerine anlamlı bir yükleme göstergesi görüntüleyerek uygulamanın daha duyarlı hissettirmesini sağlar.
• Bildirimsel Yüklenme Durumları: Yüklenme durumlarını doğrudan bileşen ağacınızda tanımlayarak kodun okunmasını ve anlaşılmasını kolaylaştırır.
• Kod Bölme (Code Splitting): Suspense, kod bölme (React.lazy kullanarak) ile sorunsuz bir şekilde çalışarak ilk yükleme sürelerini iyileştirir.
• Basitleştirilmiş Asenkron Veri Çekme: Suspense, uyumlu veri çekme kütüphaneleriyle entegre olarak veri yükleme için daha akıcı bir yaklaşım sunar.

Zorluk: İç İçe Yüklenme Durumları

Suspense genel olarak yüklenme durumlarını basitleştirse de, derinlemesine iç içe geçmiş bileşen ağaçlarındaki yüklenme durumlarını yönetmek karmaşık hale gelebilir. Bir üst bileşenin bazı başlangıç verilerini çektiği ve ardından her biri kendi verisini çeken alt bileşenleri render ettiği bir senaryo düşünün. Üst bileşenin verilerini gösterdiği ancak alt bileşenlerin hala yüklenmekte olduğu ve bu durumun kopuk bir kullanıcı deneyimine yol açtığı bir durumla karşılaşabilirsiniz.

Bu basitleştirilmiş bileşen yapısını düşünün:

<ParentComponent>
  <ChildComponent1>
    <GrandChildComponent />
  </ChildComponent1>
  <ChildComponent2 />
</ParentComponent>

Bu bileşenlerin her biri asenkron olarak veri çekiyor olabilir. Bu iç içe yüklenme durumlarını zarif bir şekilde ele almak için bir stratejiye ihtiyacımız var.

Suspense ile İç İçe Yükleme Yönetimi Stratejileri

İç içe yüklenme durumlarını etkili bir şekilde yönetmek için kullanabileceğiniz birkaç strateji aşağıda verilmiştir:

1. Bireysel Suspense Sınırları

En basit yaklaşım, veri çeken her bileşeni kendi <Suspense> sınırı ile sarmaktır. Bu, her bileşenin kendi yüklenme durumunu bağımsız olarak yönetmesini sağlar.

const ParentComponent = () => {
  // ...
  return (
    <div>
      <h2>Parent Component</h2>
      <ChildComponent1 />
      <ChildComponent2 />
    </div>
  );
};

const ChildComponent1 = () => {
  return (
    <Suspense fallback={<p>Alt Bileşen 1 Yükleniyor...</p>}>
      <AsyncChild1 />
    </Suspense>
  );
};

const ChildComponent2 = () => {
  return (
    <Suspense fallback={<p>Alt Bileşen 2 Yükleniyor...</p>}>
      <AsyncChild2 />
    </Suspense>
  );
};

const AsyncChild1 = () => {
  const data = useAsyncData('child1'); // Asenkron veri çekme için özel hook
  return <p>Alt Bileşen 1'den Gelen Veri: {data}</p>;
};

const AsyncChild2 = () => {
  const data = useAsyncData('child2'); // Asenkron veri çekme için özel hook
  return <p>Alt Bileşen 2'den Gelen Veri: {data}</p>;
};

const useAsyncData = (key) => {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    let didCancel = false;
    const fetchData = async () => {
      // Veri çekme gecikmesini simüle et
      await new Promise(resolve => setTimeout(resolve, 1000));
      if (!didCancel) {
        setData(`${key} için Veri`);
      }
    };

    fetchData();

    return () => {
      didCancel = true;
    };
  }, [key]);

  if (data === null) {
    throw new Promise(resolve => setTimeout(resolve, 1000)); // Daha sonra çözülecek bir promise'i simüle et
  }
  return data;
};

export default ParentComponent;

Artıları: Uygulaması basittir, her bileşen kendi yüklenme durumunu yönetir. Eksileri: Farklı zamanlarda birden fazla yükleme göstergesinin görünmesine yol açarak potansiyel olarak sarsıcı bir kullanıcı deneyimi yaratabilir. Yükleme göstergelerinin "şelale" etkisi görsel olarak hoş olmayabilir.

2. Üst Seviyede Paylaşılan Suspense Sınırı

Başka bir yaklaşım, tüm bileşen ağacını en üst seviyede tek bir <Suspense> sınırı ile sarmaktır. Bu, herhangi bir şey render edilmeden önce tüm arayüzün tüm asenkron verilerin yüklenmesini beklemesini sağlar.

const App = () => {
  return (
    <Suspense fallback={<p>Uygulama Yükleniyor...</p>}>
      <ParentComponent />
    </Suspense>
  );
};

Artıları: Daha bütünsel bir yükleme deneyimi sağlar; tüm veriler yüklendikten sonra tüm arayüz aynı anda görünür. Eksileri: Kullanıcı, özellikle bazı bileşenlerin verilerini yüklemesi önemli miktarda zaman alıyorsa, herhangi bir şey görmeden önce uzun bir süre beklemek zorunda kalabilir. Bu, her senaryo için ideal olmayabilecek bir "ya hep ya hiç" yaklaşımıdır.

3. Koordineli Yükleme için SuspenseList

<SuspenseList>, Suspense sınırlarının ortaya çıkma sırasını koordine etmenizi sağlayan bir bileşendir. Yüklenme durumlarının gösterimini kontrol etmenize olanak tanıyarak şelale etkisini önler ve daha akıcı bir görsel geçiş yaratır.

<SuspenseList> için iki ana prop vardır: * `revealOrder`: <SuspenseList>'in alt öğelerinin ortaya çıkma sırasını kontrol eder. Değerleri `'forwards'`, `'backwards'` veya `'together'` olabilir. * `tail`: Bazı öğeler, hepsi değil, ortaya çıkmaya hazır olduğunda kalan ortaya çıkmamış öğelerle ne yapılacağını kontrol eder. Değerleri `'collapsed'` veya `'suspended'` olabilir.

import { unstable_SuspenseList as SuspenseList } from 'react';

const ParentComponent = () => {
  return (
    <div>
      <h2>Parent Component</h2>
      <SuspenseList revealOrder="forwards" tail="suspended">
        <Suspense fallback={<p>Alt Bileşen 1 Yükleniyor...</p>}>
          <ChildComponent1 />
        </Suspense>
        <Suspense fallback={<p>Alt Bileşen 2 Yükleniyor...</p>}>
          <ChildComponent2 />
        </Suspense>
      </SuspenseList>
    </div>
  );
};

Bu örnekte, `revealOrder="forwards"` prop'u, ChildComponent1'in ChildComponent2'den önce ortaya çıkmasını sağlar. `tail="suspended"` prop'u ise ChildComponent1 tamamen yüklenene kadar ChildComponent2 için yükleme göstergesinin görünür kalmasını sağlar.

Artıları: Yükleme durumlarının ortaya çıkma sırası üzerinde ayrıntılı kontrol sağlayarak daha öngörülebilir ve görsel olarak çekici bir yükleme deneyimi yaratır. Şelale etkisini önler. Eksileri: <SuspenseList> ve propları hakkında daha derin bir anlayış gerektirir. Bireysel Suspense sınırlarına göre kurulumu daha karmaşık olabilir.

4. Suspense'i Özel Yükleme Göstergeleriyle Birleştirmek

<Suspense> tarafından sağlanan varsayılan yedek arayüzü kullanmak yerine, kullanıcıya daha fazla görsel bağlam sağlayan özel yükleme göstergeleri oluşturabilirsiniz. Örneğin, yüklenmekte olan bileşenin düzenini taklit eden bir iskelet yükleme animasyonu (skeleton loading) görüntüleyebilirsiniz. Bu, algılanan performansı ve kullanıcı deneyimini önemli ölçüde iyileştirebilir.

const ChildComponent1 = () => {
  return (
    <Suspense fallback={<SkeletonLoader />}>
      <AsyncChild1 />
    </Suspense>
  );
};

const SkeletonLoader = () => {
  return (
    <div className="skeleton-loader">
      <div className="skeleton-line"></div>
      <div className="skeleton-line"></div>
      <div className="skeleton-line"></div>
    </div>
  );
};

(Animasyon efektini oluşturmak için `.skeleton-loader` ve `.skeleton-line` için CSS stillerinin ayrı olarak tanımlanması gerekir.)

Artıları: Daha ilgi çekici ve bilgilendirici bir yükleme deneyimi yaratır. Algılanan performansı önemli ölçüde iyileştirebilir. Eksileri: Basit yükleme göstergelerine göre uygulanması daha fazla çaba gerektirir.

5. Suspense Entegrasyonlu Veri Çekme Kütüphanelerinden Yararlanma

Relay ve SWR (Stale-While-Revalidate) gibi bazı veri çekme kütüphaneleri, Suspense ile sorunsuz çalışacak şekilde tasarlanmıştır. Bu kütüphaneler, veri çekilirken bileşenleri askıya almak için yerleşik mekanizmalar sunarak yüklenme durumlarını yönetmeyi kolaylaştırır.

İşte SWR kullanarak bir örnek:

import useSWR from 'swr'

const AsyncChild1 = () => {
  const { data, error } = useSWR('/api/data', fetcher)

  if (error) return <div>yüklenemedi</div>
  if (!data) return <div>yükleniyor...</div> // SWR, suspense'i dahili olarak yönetir

  return <div>{data.name}</div>
}

const fetcher = (...args) => fetch(...args).then(res => res.json())

SWR, veri yükleme durumuna göre suspense davranışını otomatik olarak yönetir. Veri henüz mevcut değilse, bileşen askıya alınacak ve <Suspense> yedeği görüntülenecektir.

Artıları: Veri çekme ve yüklenme durumu yönetimini basitleştirir. Genellikle geliştirilmiş performans için önbellekleme (caching) ve yeniden doğrulama (revalidation) stratejileri sunar. Eksileri: Belirli bir veri çekme kütüphanesini benimsemeyi gerektirir. Kütüphaneyle ilişkili bir öğrenme eğrisi olabilir.

İleri Düzey Hususlar

Hata Sınırları (Error Boundaries) ile Hata Yönetimi

Suspense yüklenme durumlarını yönetirken, veri çekme sırasında oluşabilecek hataları yönetmez. Hata yönetimi için Hata Sınırları (Error Boundaries) kullanmalısınız. Hata Sınırları, alt bileşen ağaçlarının herhangi bir yerindeki JavaScript hatalarını yakalayan, bu hataları kaydeden ve bir yedek arayüz görüntüleyen React bileşenleridir.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Bir sonraki render'da yedek arayüzün gösterilmesi için state'i güncelle.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Hatayı bir hata raporlama servisine de kaydedebilirsiniz
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Herhangi bir özel yedek arayüz render edebilirsiniz
      return <h1>Bir şeyler ters gitti.</h1>;
    }

    return this.props.children; 
  }
}

const ParentComponent = () => {
  return (
    <ErrorBoundary>
      <Suspense fallback={<p>Yükleniyor...</p>}>
        <ChildComponent />
      </Suspense>
    </ErrorBoundary>
  );
};

Veri çekme sırasında oluşabilecek hataları yönetmek için <Suspense> sınırınızı bir <ErrorBoundary> ile sarın.

Performans Optimizasyonu

Suspense kullanıcı deneyimini iyileştirirken, performans darboğazlarını önlemek için veri çekme ve bileşen render işlemlerinizi optimize etmek önemlidir. Aşağıdakileri göz önünde bulundurun:

• Memoization: Aynı propları alan bileşenlerin gereksiz yere yeniden render edilmesini önlemek için React.memo kullanın.
• Kod Bölme: Kodunuzu daha küçük parçalara ayırarak ilk yükleme süresini azaltmak için React.lazy kullanın.
• Önbellekleme (Caching): Gereksiz veri çekmeyi önlemek için önbellekleme stratejileri uygulayın.
• Debouncing ve Throttling: API çağrılarının sıklığını sınırlamak için debouncing ve throttling tekniklerini kullanın.

Sunucu Taraflı Oluşturma (SSR)

Suspense, Next.js ve Remix gibi sunucu taraflı oluşturma (SSR) framework'leriyle de kullanılabilir. Ancak, Suspense ile SSR, veri hidrasyonuyla (data hydration) ilgili karmaşıklıklar getirebileceğinden dikkatli bir değerlendirme gerektirir. Tutarsızlıkları önlemek için sunucuda çekilen verilerin istemcide düzgün bir şekilde serileştirildiğinden ve hidrate edildiğinden emin olmak çok önemlidir. SSR framework'leri genellikle Suspense'i SSR ile yönetmek için yardımcılar ve en iyi uygulamalar sunar.

Pratik Örnekler ve Kullanım Senaryoları

Suspense'in gerçek dünya uygulamalarında nasıl kullanılabileceğine dair bazı pratik örnekleri inceleyelim:

1. E-ticaret Ürün Sayfası

Bir e-ticaret ürün sayfasında, ürün detayları, yorumlar ve ilgili ürünler gibi asenkron olarak veri yükleyen birden fazla bölümünüz olabilir. Veriler çekilirken her bölüm için bir yükleme göstergesi görüntülemek üzere Suspense kullanabilirsiniz.

2. Sosyal Medya Akışı

Bir sosyal medya akışında, gönderiler, yorumlar ve kullanıcı profilleri gibi bağımsız olarak veri yükleyen öğeleriniz olabilir. Veriler çekilirken her gönderi için bir iskelet yükleme animasyonu görüntülemek üzere Suspense kullanabilirsiniz.

3. Pano (Dashboard) Uygulaması

Bir pano uygulamasında, farklı kaynaklardan veri yükleyen grafikleriniz, tablolarınız ve haritalarınız olabilir. Veriler çekilirken her bir grafik, tablo veya harita için bir yükleme göstergesi görüntülemek üzere Suspense kullanabilirsiniz.

Bir **global** pano uygulaması için aşağıdakileri göz önünde bulundurun:

• Saat Dilimleri: Verileri kullanıcının yerel saat diliminde görüntüleyin.
• Para Birimleri: Parasal değerleri kullanıcının yerel para biriminde görüntüleyin.
• Diller: Pano arayüzü için çok dilli destek sağlayın.
• Bölgesel Veriler: Kullanıcıların bölgelerine veya ülkelerine göre verileri filtrelemesine ve görüntülemesine izin verin.

Sonuç

React Suspense, React uygulamalarınızda asenkron veri çekme ve yüklenme durumlarını yönetmek için güçlü bir araçtır. İç içe yükleme yönetimi için farklı stratejileri anlayarak, karmaşık bileşen ağaçlarında bile daha akıcı ve ilgi çekici bir kullanıcı deneyimi yaratabilirsiniz. Üretim uygulamalarında Suspense kullanırken hata yönetimini, performans optimizasyonunu ve sunucu taraflı oluşturmayı göz önünde bulundurmayı unutmayın. Asenkron işlemler birçok uygulamanın ortak bir parçasıdır ve React Suspense kullanmak, bunları temiz bir şekilde ele almanız için size bir yol sunabilir.