Suspense

React 🟡 Mid

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

Comme un écran 'Chargement...' au cinéma pendant que le projectionniste change de bobine.

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

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

Afficher un loader pendant le chargement paresseux de composants ou de données avec React Query.

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

#core#interview#performance

Explique-moi Suspense.
C'est un composant qui affiche un fallback pendant que ses enfants chargent des données ou du code asynchrone, un pilier du rendu concurrent de React. On l'utilise typiquement pour afficher un loader pendant le chargement paresseux de composants ou de données avec React Query.
Quel anti-pattern d'organisation des Suspense faut-il éviter ?
Entourer chaque composant individuellement avec Suspense au lieu de regrouper les limites logiques, ce qui multiplie les loaders disparates. Il vaut mieux poser une frontière Suspense par zone cohérente de l'interface.

Fiche mise à jour le 2026-09-27