Q270- Explain props of Suspense component in React?

<Suspense> is a React component used to wrap lazy-loaded components and show a fallback UI while they load.

It has very few props, and the most important one is:

---

✅ 1. fallback (Required)

The UI shown while the lazy component is being loaded.

Example:

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

fallback can be:

• A spinner
• A skeleton loader
• A simple text
• A custom component

✔ This is the primary and most used prop of Suspense.

---

✅ 2. children

Anything wrapped inside <Suspense>.

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

✔ Suspense waits for these children to resolve before rendering.

---

⚠️ Note: Older React Docs Mentioned maxDuration

This was experimental and is removed from stable React versions.
So only fallback and children matter for real production apps.

---

⭐ Suspense Props Summary

Prop	Description
fallback	Loader UI shown while waiting
children	Lazy-loaded components that Suspense should wait for

---

🧠 Example with React.lazy()

const About = React.lazy(() => import("./About"));

function App() {
  return (
    <Suspense fallback={<h2>Loading page...</h2>}>
      <About />
    </Suspense>
  );
}

---

🎯 Short Interview Answer

<Suspense> mainly uses the fallback prop to show a loading UI while a lazy-loaded component loads.
Its children are the components that need suspense boundaries.
React Suspense doesn’t have many props—fallback is the key one used in real applications.