Suspense coordinates fallback UI for supported suspending resources. Boundary placement decides which parts of the interface remain usable during loading.
Before you start
You should know how a function component renders JSX, receives props and handles events. Follow the value through render, interaction and the next render. Small snippets below belong inside an existing React application unless they are explicitly shown as complete components.
The practical goal is to reason through this situation: A detail boundary can show a skeleton while navigation remains visible. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Choose useful independent regions
Navigation should remain usable while detail content loads. Place a boundary around the detail region rather than the whole application.
Step 2: Use a supported resource
Suspense requires a compatible suspending data or code source. An ordinary Effect fetch only changes its own loading state.
Step 3: Design reveal behavior
Select a meaningful fallback and nested boundaries only where separate sections provide value. Avoid many distracting independent spinners.
Worked scenario
A detail boundary can show a skeleton while navigation remains visible.
<nav>Account navigation</nav>
<Suspense fallback={<p>Loading account details…</p>}>
<AccountDetails />
</Suspense>AccountDetails must use a supported suspending source supplied by the framework or resource integration. If it simply fetches in useEffect, this boundary will not automatically own that request’s loading state.
Common mistake
An ordinary fetch inside an Effect does not automatically activate Suspense.
Verify the behavior
Delay the supported resource and observe which region stays usable. Test resource failure separately; Suspense fallback is not itself an error recovery policy.
Interview exercise
Design nested loading states.
Answer and reasoning
Place boundaries around independently useful sections and use a framework or compatible resource model for suspension.
Continue learning
Compare the scenario with the React interview questions and test your understanding with the React MCQs. For terminology and implementation details, consult the reference material.