React'ta Lazy Loading

Büyük React uygulamaları büyük JavaScript paketleri oluşturur. Büyük paketler sitenizi yavaşlatır. Kullanıcılar uygulamanızla etkileşime geçmek için daha uzun süre bekler. Bu durum kullanıcı deneyiminizi olumsuz etkiler.

Lazy loading bunu çözer. Bileşenleri yalnızca kullanıcıların ihtiyaç duyduğu anlarda yükler. Her şeyi aynı anda yüklemeyi bırakırsınız.

Lazy loading'in avantajları:

React.lazy() nasıl kullanılır? React, bileşenleri dinamik olarak içe aktarmak için lazy() adlı bir fonksiyon sağlar. React, kodu yalnızca bileşeni render ettiğinde indirir.

Örnek kod: import { lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

Lazy bileşenlerle birlikte Suspense kullanmalısınız. Suspense, bileşen yüklenirken bir fallback UI gösterir.

Örnek kod: import { Suspense, lazy } from "react";

const ProductDetail = lazy(() => import("./pages/ProductDetail"));

function App() { return ( <Suspense fallback={

Loading...
}> ); }

Başarı için iki kural:

  • Bileşenleriniz default export kullanmalıdır.
  • Lazy import'larınızı bileşen fonksiyonlarınızın dışında tanımlayın.

Projelerinizde lazy loading kullanıyor musunuz? Aşağıya bir yorum bırakın. Size yanıt vereceğim.

Kaynak: https://dev.to/madhubankhatri/lazy-loading-in-react-improve-performance-with-reactlazy-and-suspense-5edk