React.lazy nedir?
- React kursu
- Orta seviye
- Ders 57/80
- 4 dk
React.lazy ile bileşenleri tembel yüklemeyi öğrenirsin.
React.lazy nedir?
React.lazy, bir bileşeni ilk çizimde değil, ihtiyaç duyulduğunda yükler. Bu, kod bölme (code splitting) sağlar; uygulamanın başlangıç paketi küçülür.
Kullanımı basittir: const Heavy = React.lazy(() => import('./Heavy')). Bileşen çağrıldığında ilgili modül tarayıcıdan yüklenir. Bu süre zarfında bir yükleme göstergesi gerekir.
İşte burada Suspense devreye girer; yükleme tamamlanana kadar bir yedek içerik gösterir.
Suspense sınırı
Suspense bileşeni, alt bileşenlerin yüklenmesini beklerken bir yedek içerik gösterir. fallback prop'u yükleme sırasında çizilecek içeriği alır.
Örnek: <Suspense fallback={"{"<Spinner />}"}><Heavy /></Suspense>. Heavy yüklenene kadar Spinner çizilir; yükleme bitince Heavy çizilir.
Suspense'i lazy bileşenin üstüne sarmal olarak koyarsın. Birden fazla lazy bileşen varsa tek Suspense hepsini sarabilir.
Uygulama lazy ve Suspense
Aşağıdaki iskeleti tamamla. Heavy bileşenini React.lazy ile tanımla; App bileşeni <Suspense fallback={"{"<Spinner />}"}><Heavy /></Suspense> döndürsün. Dışa aktar.
Başlangıç kodu
import { lazy, Suspense } from "react";
// Heavy bileşenini lazy ile tanımla ve App'i buraya yazÖrnek çözüm
import { lazy, Suspense } from "react";
const Heavy = lazy(() => import("./Heavy"));
function App() {
return (
<Suspense fallback={<Spinner />}>
<Heavy />
</Suspense>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 React.lazy ne sağlar?
- Kod bölme Doğru cevap
- Daha hızlı çizim
- Daha az state
- Daha az prop
Açıklama: React.lazy kod bölme sağlar; başlangıç paketi küçülür.
2 lazy çağrısı
const Heavy = React.lazy(() => ____);const Heavy = React.lazy(() => import('./Heavy'));Açıklama: import('./Heavy') dinamik ithalatı döndürür.
3 React.lazy nedir: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
React.lazy |
Dinamik ithalat |
Suspense |
Yükleme sınırı |
fallback |
Yedek içerik |
import() |
Modül yükler |