The fallback prop in <Suspense> specifies what UI to show while waiting for the suspended content to become available.

Think of fallback as the temporary placeholder UI — like a loading spinner, a skeleton loader, or a simple "Loading..." text.

How it works:

• If a child inside <Suspense> is not ready (e.g., lazy component, data pending), React renders the fallback UI instead.
• Once the child becomes ready, React automatically replaces the fallback with the real content.

Example:

<Suspense fallback={<div>Loading...</div>}>
  <LazyLoadedComponent />
</Suspense>

In this example:

• While LazyLoadedComponent is being fetched, React shows <div>Loading...</div>.
• After it’s loaded, React shows LazyLoadedComponent without needing extra code from you.

Key Points:

• fallback must be a valid React element.
• You can customize fallback for different parts of the UI (different spinners or placeholders).

Pro tip: Fallback UIs should match the surrounding UX — fast parts might need a tiny spinner, slow critical screens may need skeletons or richer placeholders.

---