Suspense sınırı
- React kursu
- Orta seviye
- Ders 58/80
- 4 dk
Suspense ile yükleme sırasında yedek göstermeyi öğrenirsin.
Suspense sınırı
Suspense, alt bileşenlerin yüklenmesini beklerken yedek içerik gösteren bir bileşendir. fallback prop'u yükleme göstergesi alır: bir spinner, bir metin veya bir iskelet yapı.
Suspense'i lazy bileşenin dışına sarmal olarak koyarsın. Yükleme bitince yedek içerik kalkar ve gerçek bileşen çizilir. Bu geçiş otomatiktir.
İyi bir yedek içerik, gerçek içeriğin boyutuna yakın olmalı; böylece yüklenince yer sıçramaz. Buna 'iskelet' (skeleton) denir.
İskelet yedek içerik
İskelet (skeleton) yedek içerik, gerçek içeriğin yer tutucu bir çerçevesidir. Boyut ve biçim gerçek içeriğe yakındır; böylece yükleme bitince yer sıçramaz.
Örnek: bir kartın iskeleti gri arka planlı kutular içerir; metin ve görsel alanları temsil eder. Gerçek içerik yüklendiğinde kutular gerçek içerikle değişir.
Bu yaklaşım kullanıcı deneyimini iyileştirir; boş ekran yerine yapısal bir yükleme göstergesi sunar.
Uygulama İskelet yedek içerik
Aşağıdaki iskeleti tamamla. App bileşeni yaz; <Suspense fallback={"{"<Skeleton />}"}><Card /></Suspense> döndür. Dışa aktar.
Başlangıç kodu
import { Suspense } from "react";
// App bileşenini buraya yazÖrnek çözüm
import { Suspense } from "react";
function App() {
return (
<Suspense fallback={<Skeleton />}>
<Card />
</Suspense>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Suspense fallback ne zaman çizilir?
- Her zaman
- Hata sırasında
- Yükleme sırasında Doğru cevap
- Çizim bitince
Açıklama: fallback yükleme sırasında çizilir, bitince kalkar.
2 fallback prop
<Suspense ____={<Spinner />}><Heavy /></Suspense><Suspense fallback={<Spinner />}><Heavy /></Suspense>Açıklama: fallback prop yükleme içeriğini alır.
3 Suspense sınırı: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
Suspense |
Yükleme sınırı |
fallback |
Yedek içerik |
skeleton |
Yer tutucu çerçeve |
Spinner |
Dönen yükleme |