How do you show loading and error states for async data?
Quick answer
Track status (loading/error/data) explicitly and render a spinner, an error message, or the content accordingly — never just the happy path.
In detail
Every async operation has three outcomes you must handle. With raw effects, keep loading/error/data state. With React Query, use isLoading/isError/data. With Suspense + a Suspense-enabled source, you can render a fallback declaratively and catch failures with an error boundary. Always handle empty states too.
if (isLoading) return <Spinner />;
if (error) return <Error onRetry={refetch} />;
if (!data.length) return <Empty />;
return <List items={data} />;Why interviewers ask this: Production-readiness signal — juniors forget error states.
This is 1 of 118+ questions in the React Interview Kit
Get every question with detailed answers, follow-ups and real code — plus coding challenges and a last-minute revision sheet. One-time payment, instant access.
⚡ Get the React Interview Kit → ₹399