Suspense

React 🟡 Mid

Definition

Composant qui affiche un fallback pendant que ses enfants chargent des donnees ou du code asynchrone. Pilier du rendu concurrent.

Analogie

Comme un ecran 'Chargement...' au cinema pendant que le projectionniste change de bobine.

Exemple de code

const LazyPage = React.lazy(() => import('./Page'));

<Suspense fallback={<Spinner />}>
  <LazyPage />
</Suspense>

Cas d'usage

Afficher un loader pendant le chargement paresseux de composants ou de donnees avec React Query.

Anti-pattern

Entourer chaque composant avec Suspense individuellement au lieu de regrouper les limites logiques.

Termes lies

#core#interview#performance