What is Suspense in React?
Why Interviewers Ask This
Interviewers use this question to quickly assess whether a candidate has the foundational knowledge required for React.js development. It reveals whether you understand the building blocks that more complex concepts rely on.
Answer
React Suspense is a component that lets you declaratively specify what to show while waiting for something to load. Initially (React 16.6), Suspense only worked with React.lazy() for code splitting. React 18 expanded Suspense to work with data fetching through frameworks that implement the Suspense protocol (Next.js App Router, Relay, SWR experimental). Syntax: <Suspense fallback={<LoadingSpinner />}><ComponentThatLoads /></Suspense>. When a component inside Suspense "suspends" (throws a Promise), React renders the fallback instead. When the Promise resolves, React replaces the fallback with the component. Nested Suspense: multiple Suspense boundaries let different parts of the UI show their own loading states independently. React 18 features: startTransition + Suspense enables non-blocking UI updates; use() hook (React 19) integrates Suspense with arbitrary promises. Suspense represents a shift from imperative loading state management (loading booleans, if-else checks) to declarative loading states.
Common Mistake
Candidates often give textbook answers here. Interviewers are more impressed when you relate the concept to a specific problem you solved in a real React.js project.