16 Ağustos 2025Türkçe

Güçlü yükleme durumu yönetimi ve zarif hata yönetimi için React Suspense ve Hata Sınırları'nda uzmanlaşın. Dayanıklı ve kullanıcı dostu uygulamalar oluşturmayı öğrenin.

React Suspense ve Hata Sınırları: Gelişmiş Yükleme ve Hata Yönetimi

React Suspense ve Hata Sınırları, geliştiricilerin daha dayanıklı ve kullanıcı dostu uygulamalar oluşturmalarına olanak tanıyan güçlü özelliklerdir. Yükleme durumlarını ve beklenmedik hataları ele almak için bildirimsel bir yol sağlayarak, genel kullanıcı deneyimini iyileştirir ve geliştirme sürecini basitleştirirler. Bu makale, React Suspense ve Hata Sınırlarını etkili bir şekilde kullanmaya yönelik kapsamlı bir kılavuz sağlayarak, temel kavramlardan gelişmiş tekniklere kadar her şeyi kapsar.

React Suspense'i Anlamak

React Suspense, belirli bir koşul karşılanana kadar, tipik olarak asenkron bir işlemden veri kullanılabilirliği sağlanana kadar bir bileşenin işlenmesini "askıya alma" mekanizmasıdır. Bu, verilerin yüklenmesini beklerken yükleme göstergeleri gibi yedek kullanıcı arayüzünü görüntülemenizi sağlar. Suspense, yükleme durumlarının yönetimini basitleştirerek, manuel koşullu işlemeye olan ihtiyacı ortadan kaldırır ve kodun okunabilirliğini artırır.

Suspense'in Temel Kavramları

Suspense Sınırları: Bunlar, askıya alabilecek bileşenleri saran React bileşenleridir. Sarılı bileşenler askıdayken görüntülenecek yedek kullanıcı arayüzünü tanımlarlar.
Yedek Kullanıcı Arayüzü: Bir bileşen askıdayken görüntülenen kullanıcı arayüzü. Bu, genellikle bir yükleme göstergesi veya bir yer tutucudur.
Asenkron Veri Getirme: Suspense, `fetch`, `axios` veya özel veri getirme çözümleri gibi asenkron veri getirme kitaplıklarıyla sorunsuz bir şekilde çalışır.
Kod Bölme: Suspense, kod modüllerinin yüklenmesini geciktirmek, kod bölmeyi etkinleştirmek ve ilk sayfa yükleme performansını iyileştirmek için de kullanılabilir.

Suspense'in Temel Uygulanması

Veri getirilirken yükleme göstergesi görüntülemek için Suspense'i nasıl kullanacağınıza dair basit bir örnek aşağıdadır:


import React, { Suspense } from 'react';

// Veri getirmeyi simüle etme (örneğin, bir API'den)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Suspense'in kullanabileceği bir kaynak oluşturma
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Kaynaktan okuyan bileşen
const UserProfile = () => {
  const data = userData.read();
  return (
    
      Adı: {data.name}
      Yaşı: {data.age}
    
  );
};

const App = () => {
  return (
    Kullanıcı verileri yükleniyor...

}>
      
    
  );
};

export default App;

Bu örnekte:

`fetchData` asenkron bir veri getirme işlemini simüle eder.
`createResource`, Suspense'in verilerin yükleme durumunu izlemek için kullanabileceği bir kaynak oluşturur.
`UserProfile`, `read` yöntemini kullanarak kaynaktan veri okur. Veriler henüz mevcut değilse, bileşeni askıya alan bir promise atar.
`Suspense` bileşeni `UserProfile`ı sarar ve bileşen askıdayken görüntülenecek kullanıcı arayüzünü belirten bir `fallback` prop sağlar.

Kod Bölmeyle Suspense

Suspense ayrıca kod bölmeyi uygulamak için React.lazy ile de kullanılabilir. Bu, bileşenleri yalnızca ihtiyaç duyulduğunda yüklemenizi sağlayarak ilk sayfa yükleme performansını iyileştirir.


import React, { Suspense, lazy } from 'react';

// MyComponent bileşenini tembelce yükleme
const MyComponent = lazy(() => import('./MyComponent'));

const App = () => {
  return (
    Bileşen yükleniyor...}>
      
    
  );
};

export default App;

Bu örnekte:

`React.lazy`, `MyComponent` bileşenini tembelce yüklemek için kullanılır.
`Suspense` bileşeni `MyComponent`ı sarar ve bileşen yüklenirken görüntülenecek kullanıcı arayüzünü belirten bir `fallback` prop sağlar.

Hata Sınırlarını Anlamak

Hata Sınırları, alt bileşen ağacındaki herhangi bir yerdeki JavaScript hatalarını yakalayan, bu hataları günlüğe kaydeden ve tüm uygulamanın çökmesi yerine yedek bir kullanıcı arayüzü görüntüleyen React bileşenleridir. Kullanıcı deneyimini iyileştirerek ve uygulamanızı daha sağlam hale getirerek beklenmedik hataları zarif bir şekilde ele almanın bir yolunu sağlarlar.

Hata Sınırlarının Temel Kavramları

Hata Yakalama: Hata Sınırları, işleme sırasında, yaşam döngüsü yöntemlerinde ve altlarındaki tüm ağacın yapıcısında hataları yakalar.
Yedek Kullanıcı Arayüzü: Bir hata oluştuğunda görüntülenen kullanıcı arayüzü. Bu, genellikle bir hata mesajı veya bir yer tutucudur.
Hata Günlüğü: Hata Sınırları, hataları hata ayıklama amacıyla bir hizmete veya konsola kaydetmenize olanak tanır.
Bileşen Ağacı İzolasyonu: Hata Sınırları, hataları bileşen ağacının belirli bölümlerine izole ederek tüm uygulamanın çökmesini önler.

Hata Sınırlarının Temel Uygulanması

Bir Hata Sınırı oluşturmaya ilişkin basit bir örnek aşağıdadır:


import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // Durumu güncelleyin, böylece sonraki işleme yedek kullanıcı arayüzü gösterilir.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Hatayı bir hata raporlama hizmetine veya konsola da kaydedebilirsiniz
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Herhangi bir özel yedek kullanıcı arayüzü işleyebilirsiniz
      return Bir şeyler ters gitti.;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Bu örnekte:

`ErrorBoundary` bileşeni `getDerivedStateFromError` ve `componentDidCatch` yöntemlerini tanımlar.
`getDerivedStateFromError`, bir alt bileşende bir hata oluştuğunda çağrılır. Bir hata oluştuğunu belirtmek için durumu günceller.
`componentDidCatch`, bir hata yakalandıktan sonra çağrılır. Hatayı bir hizmete veya konsola kaydetmenize olanak tanır.
`render` yöntemi, `hasError` durumunu kontrol eder ve bir hata oluştuysa yedek bir kullanıcı arayüzü görüntüler.

Hata Sınırlarını Kullanma

`ErrorBoundary` bileşenini kullanmak için, korumak istediğiniz bileşenleri onunla sarın:


import React from 'react';
import ErrorBoundary from './ErrorBoundary';

const MyComponent = () => {
  // Bir hatayı simüle etme
  throw new Error('Bir hata oluştu!');
};

const App = () => {
  return (
    
      
    
  );
};

export default App;

Bu örnekte, `MyComponent` içinde bir hata oluşursa, `ErrorBoundary` bileşeni hatayı yakalayacak ve yedek kullanıcı arayüzünü görüntüleyecektir.

Suspense ve Hata Sınırlarını Birleştirme

Suspense ve Hata Sınırları, asenkron işlemler için sağlam ve kapsamlı bir hata işleme stratejisi sağlamak üzere birleştirilebilir. Askıya alabilecek bileşenleri hem Suspense hem de Hata Sınırları ile sararak, hem yükleme durumlarını hem de beklenmedik hataları zarif bir şekilde ele alabilirsiniz.

Suspense ve Hata Sınırlarını Birleştirme Örneği


import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

// Veri getirmeyi simüle etme (örneğin, bir API'den)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Başarılı bir veri getirmeyi simüle etme
      // resolve({ name: 'John Doe', age: 30 });

      // Veri getirme sırasında bir hatayı simüle etme
      reject(new Error('Kullanıcı verileri getirilemedi'));

    }, 2000);
  });
};

// Suspense'in kullanabileceği bir kaynak oluşturma
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Kaynaktan okuyan bileşen
const UserProfile = () => {
  const data = userData.read();
  return (
    
      Adı: {data.name}
      Yaşı: {data.age}
    
  );
};

const App = () => {
  return (
    
      Kullanıcı verileri yükleniyor...}>
        
      
    
  );
};

export default App;

Bu örnekte:

`ErrorBoundary` bileşeni `Suspense` bileşenini sarar.
`Suspense` bileşeni `UserProfile` bileşenini sarar.
`fetchData` fonksiyonu bir hatayla reddederse, `Suspense` bileşeni promise reddini yakalayacak ve `ErrorBoundary` Suspense tarafından atılan hatayı yakalayacaktır.
`ErrorBoundary` daha sonra yedek kullanıcı arayüzünü görüntüleyecektir.
Veriler başarılı bir şekilde getirilirse, `Suspense` bileşeni `UserProfile` bileşenini görüntüleyecektir.

Gelişmiş Teknikler ve En İyi Uygulamalar

Suspense Performansını Optimize Etme

Memoization Kullanın: Gereksiz yeniden işlemeleri önlemek için Suspense sınırları içinde işlenen bileşenleri memoize edin.
Derin Suspense Ağaçlarından Kaçının: İşleme performansı üzerindeki etkiyi en aza indirmek için Suspense ağacını sığ tutun.
Verileri Önceden Getirme: Askıya alma olasılığını azaltmak için verileri ihtiyaç duyulmadan önce önceden getirin.

Özel Hata Sınırları

Belirli hata türlerini ele almak veya daha bilgilendirici hata mesajları sağlamak için özel Hata Sınırları oluşturabilirsiniz. Örneğin, oluşan hata türüne bağlı olarak farklı bir yedek kullanıcı arayüzü görüntüleyen bir Hata Sınırı oluşturabilirsiniz.

Suspense ile Sunucu Tarafı İşleme (SSR)

Suspense, ilk sayfa yükleme performansını iyileştirmek için Sunucu Tarafı İşleme (SSR) ile kullanılabilir. SSR kullanırken, uygulamanızın ilk durumunu sunucuda önceden işleyebilir ve ardından kalan içeriği istemciye aktarabilirsiniz. Suspense, SSR sırasında asenkron veri getirmeyi ele almanıza ve veriler aktarılırken yükleme göstergelerini görüntülemenize olanak tanır.

Farklı Hata Senaryolarını Ele Alma

Bu farklı hata senaryolarını ve bunların nasıl ele alınacağını göz önünde bulundurun:

Ağ Hataları: Kullanıcıya bilgilendirici bir hata mesajı görüntüleyerek ağ hatalarını zarif bir şekilde ele alın.
API Hataları: Oluşan hataya özel bir hata mesajı görüntüleyerek API hatalarını ele alın.
Beklenmedik Hatalar: Hatayı günlüğe kaydederek ve kullanıcıya genel bir hata mesajı görüntüleyerek beklenmedik hataları ele alın.

Genel Hata Yönetimi

Hata Sınırları tarafından yakalanmayan hataları yakalamak için genel bir hata işleme mekanizması uygulayın. Bu, genel bir hata işleyicisi kullanılarak veya tüm uygulama bir Hata Sınırı içine alınarak yapılabilir.

Gerçek Dünya Örnekleri ve Kullanım Durumları

E-ticaret Uygulaması

Bir e-ticaret uygulamasında, ürün verilerini getirirken yükleme göstergelerini görüntülemek için Suspense kullanılabilir ve ödeme işlemi sırasında oluşan hataları ele almak için Hata Sınırları kullanılabilir. Örneğin, Japonya'dan bir kullanıcının Amerika Birleşik Devletleri'nde bulunan bir çevrimiçi mağazaya göz attığını hayal edin. Ürün resimlerinin ve açıklamalarının yüklenmesi biraz zaman alabilir. Suspense, bu veriler dünyanın yarısı kadar uzakta olası bir sunucudan getirilirken basit bir yükleme animasyonu görüntüleyebilir. Ödeme ağ geçidi geçici bir ağ sorunu nedeniyle başarısız olursa (küresel olarak farklı internet altyapılarında yaygın), bir Hata Sınırı, kullanıcı dostu bir mesaj görüntüleyerek daha sonra tekrar denemelerini isteyebilir.

Sosyal Medya Platformu

Bir sosyal medya platformunda, kullanıcı profillerini ve gönderilerini getirirken yükleme göstergelerini görüntülemek için Suspense kullanılabilir ve resimleri veya videoları yüklerken oluşan hataları ele almak için Hata Sınırları kullanılabilir. Hindistan'dan göz atan bir kullanıcı, Avrupa'daki sunucularda barındırılan medya için daha yavaş yükleme süreleri yaşayabilir. Suspense, içerik tamamen yüklenene kadar bir yer tutucu gösterebilir. Belirli bir kullanıcının profil verileri bozulursa (nadir ancak olası), bir Hata Sınırı tüm sosyal medya akışının çökmesini engelleyebilir ve bunun yerine "Kullanıcı profili yüklenemiyor" gibi basit bir hata mesajı görüntüleyebilir.

Gösterge Paneli Uygulaması

Bir gösterge paneli uygulamasında, birden çok kaynaktan veri getirirken yükleme göstergelerini görüntülemek için Suspense kullanılabilir ve grafik veya çizelgeleri yüklerken oluşan hataları ele almak için Hata Sınırları kullanılabilir. Londra'da küresel bir yatırım panosuna erişen bir finans analisti, dünya çapındaki birden çok borsadan veri yüklüyor olabilir. Suspense, her veri kaynağı için yükleme göstergeleri sağlayabilir. Bir borsanın API'si kapalıysa, bir Hata Sınırı yalnızca o borsanın verileri için bir hata mesajı görüntüleyebilir ve tüm gösterge panelinin kullanılamaz hale gelmesini önleyebilir.

Sonuç

React Suspense ve Hata Sınırları, dayanıklı ve kullanıcı dostu React uygulamaları oluşturmak için temel araçlardır. Yükleme durumlarını yönetmek için Suspense'i ve beklenmedik hataları ele almak için Hata Sınırlarını kullanarak, genel kullanıcı deneyimini iyileştirebilir ve geliştirme sürecini basitleştirebilirsiniz. Bu kılavuz, temel kavramlardan gelişmiş tekniklere kadar her şeyi kapsayan Suspense ve Hata Sınırlarına kapsamlı bir genel bakış sağlamıştır. Bu makalede özetlenen en iyi uygulamaları izleyerek, en zorlu senaryoları bile ele alabilen sağlam ve güvenilir React uygulamaları oluşturabilirsiniz.

React gelişmeye devam ederken, Suspense ve Hata Sınırlarının modern web uygulamaları oluşturmada giderek daha önemli bir rol oynaması muhtemeldir. Bu özelliklerde uzmanlaşarak, eğrinin önünde kalabilir ve olağanüstü kullanıcı deneyimleri sunabilirsiniz.