Suspense w React to komponent, który pozwala na odroczenie renderowania komponentu, aż do momentu, gdy jego dane są dostępne. Suspense działa w połączeniu z React.lazy() i funkcjami asynchronicznymi, aby uprościć zarządzanie ładowaniem danych.
Używanie Suspense do ładowania dynamicznych komponentów:
- Importowanie React.lazy() do dynamicznego ładowania komponentów:
const MyComponent = React.lazy(() => import('./MyComponent'));
- Owijanie dynamicznie ładowanego komponentu w Suspense i ustawianie fallbacku:
<Suspense fallback={<div>Ładowanie...</div>}> <MyComponent /> </Suspense>
Używanie Suspense do zarządzania ładowaniem danych:
Suspense będzie również integrować się z przyszłymi funkcjami React, takimi jak React Server Components i use hookiem do zarządzania asynchronicznym ładowaniem danych.
Przykład zarządzania ładowaniem danych:
<Suspense fallback={<div>Ładowanie danych...</div>}> <DataFetchingComponent /> </Suspense>
Suspense upraszcza obsługę asynchronicznego ładowania komponentów i danych, poprawiając doświadczenie użytkownika poprzez dostarczanie odpowiednich fallbacków.
