Özet - Suspense ve lazy
- React kursu
- Orta seviye
- Ders 60/80
- 5 dk
Bir ağır modal'ı React.lazy ile yükleyip Suspense ile sararsın.
Özet - Suspense ve lazy
Bu grupta React.lazy ile kod bölme, Suspense ile yükleme sınırı ve çoklu sınır kullanımını öğrendin. lazy bileşeni ihtiyaç anında yükler; Suspense yükleme sırasında yedek gösterir.
Çoklu sınır ise her bölümün ayrı yüklenmesini sağlar; kullanıcı kademeli olarak içerik görür. Son adımda üç aracı birleştireceksin.
Uygulama Özet lazy
Aşağıdaki iskeleti tamamla. Heavy bileşenini lazy ile tanımla; App <Suspense fallback={"{"<Spinner />}"}><Heavy /></Suspense> döndürsün. Dışa aktar.
Başlangıç kodu
import { lazy, Suspense } from "react";
// Heavy 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 Hangisi kod bölme sağlar?
- useRef
- useEffect
- React.lazy Doğru cevap
- useState
Açıklama: React.lazy kod bölme sağlar.
2 Özet eşleştir
| Kavram | Anlamı |
|---|---|
React.lazy |
Kod bölme |
Suspense |
Yükleme sınırı |
fallback |
Yedek içerik |
çoklu sınır |
Kademeli yükleme |