1- Fallback Content with Suspense

Bu yazıda anlatılan konu, React'teki Suspense API'si ve özellikle lazy loading (tembel yükleme) ile ilgili. React, uygulamanızdaki bileşenleri ve verileri yüklerken optimizasyon yapmanıza olanak tanır. Bu özellik, başlangıçta yalnızca gerekli olan bileşenleri ve verileri yükleyip, daha sonra kullanıcı ihtiyacı olduğunda diğerlerini yüklemenizi sağlar. Bunun amacı, sayfa yüklenme süresini kısaltmak ve kullanıcıya daha hızlı bir deneyim sunmaktır.

React'te Suspense ve Lazy Loading Nedir?

React'teki Suspense ve lazy özellikleri, tembel yükleme ve asenkron bileşen yükleme için kullanılır. Suspense, bir bileşenin asenkron veri veya modüllerle (özellikle bileşenler) yüklenmesi sırasında bir bekleme durumu oluşturmanıza yardımcı olur. Lazy loading ise, bileşenlerin yalnızca ihtiyaç duyulduğunda yüklenmesini sağlar.

Örneğin, büyük bir uygulamanın her sayfası için tüm bileşenleri başlangıçta yüklemek yerine, sadece kullanıcı o sayfaya gittiğinde o sayfanın bileşenlerini yükleyebilirsiniz.

Kodla Örnekleme

Diyelim ki bir Notlar uygulamanız var ve bu uygulama, kullanıcı bir notu düzenlemek istediğinde "edit" bileşenini yüklemeli. Bu durumda, başlangıçta tüm "edit" bileşenlerini yüklemek yerine, kullanıcı "edit" butonuna tıkladığında sadece o bileşeni dinamik olarak yükleyebilirsiniz.

1. React Lazy Loading ile Bileşen Yükleme

React'te lazy loading için, React.lazy() fonksiyonunu kullanabilirsiniz. Bu fonksiyon, bir bileşeni dinamik olarak yükler.

Basit Lazy Loading Örneği

import React, { Suspense } from 'react';

// "EditNote" bileşeni sadece ihtiyacınız olduğunda yüklenecek
const EditNote = React.lazy(() => import('./EditNote'));

function NotesApp() {
  return (
    <div>
      <h1>My Notes</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <EditNote />
      </Suspense>
    </div>
  );
}

export default NotesApp;

Açıklamalar:

• React.lazy() fonksiyonu, EditNote bileşenini sadece ihtiyaç duyulduğunda yükler.
• Suspense bileşeni, lazy yüklenen bileşenler için bir bekleme durumunu yönetir. fallback özelliği, bileşen yüklenene kadar gösterilecek bir bekleme ekranıdır (örneğin, "Loading...").

2. Temel Notlar Uygulamasında Lazy Loading Kullanımı

Bir uygulamanın parçalara ayrılarak, belirli bölümleri sadece ihtiyaç duyulduğunda yüklemesini sağlamak için aşağıdaki gibi bir yapı oluşturabilirsiniz.

Notlar Uygulaması Örneği:

import React, { Suspense } from 'react';

// "Edit" bileşeni dinamik olarak yüklenecek
const EditNote = React.lazy(() => import('./EditNote'));

function NotesList() {
  return (
    <div>
      <h2>Notes</h2>
      <button>Edit Note</button>
    </div>
  );
}

function NotesApp() {
  return (
    <div>
      <h1>My Notes App</h1>
      <NotesList />
      
      {/* EditNote bileşenini tembel yükleme ile yükle */}
      <Suspense fallback={<div>Loading edit screen...</div>}>
        <EditNote />
      </Suspense>
    </div>
  );
}

export default NotesApp;

Açıklamalar:

• EditNote bileşeni sadece kullanıcı edit butonuna tıkladığında yüklenir.