React › Suspense & Concurrent Rendering

What should you place inside a Suspense fallback, and what are some good practices?

Beginner

Answer

A good fallback usually matches the general size and shape of the content it is replacing, such as a skeleton placeholder that resembles the layout of the actual content, rather than a small spinner that causes the page to visibly jump once the real content finally loads in.

function ProductCardFallback() {
  return (
    <div className="card-skeleton">
      <div className="skeleton-image" />
      <div className="skeleton-text" />
    </div>
  );
}

<Suspense fallback={<ProductCardFallback />}>
  <ProductCard />
</Suspense>

Real-world example A shopping site shows a gray skeleton shape matching the size of a product card while it loads, giving a smoother visual experience than a plain spinner that would cause the page layout to jump once the real card appears.

Common follow-ups: Why does a layout shift when content finally loads create a poor user experience?;How would you build a reusable skeleton component that many different Suspense fallbacks can share?

Performance (memo/useMemo);Components & JSX