Data Fetching & APIs
React Loading and Error States
Every asynchronous screen has at least four states: idle, loading, success and error — and success splits into "has data" and "empty". Designing all of them is what makes an interface feel finished.
What is Loading and Error States in React?
Every asynchronous screen has at least four states: idle, loading, success and error — and success splits into "has data" and "empty". Designing all of them is what makes an interface feel finished.
Why Loading and Error States matters
Skipping the empty and error states is the most common gap in student projects, and it is exactly what an interviewer looks for when reviewing your code.
Loading and Error States example
const [status, setStatus] = useState('idle'); // idle | loading | success | error
if (status === 'loading') return <Skeleton rows={5} />;
if (status === 'error') return <ErrorBox onRetry={load} />;
if (jobs.length === 0) return <EmptyState message="No internships match your filters." />;
return <JobGrid jobs={jobs} />;How this works
A single status string makes impossible combinations unrepresentable — you can never be loading and errored at once, which two independent booleans would allow.
Key points to remember
- Prefer skeletons over spinners; they reduce perceived wait and prevent layout shift.
- Always offer a retry action on the error state.
- Treat empty results as a designed state, not an accident.
Common mistakes with Loading and Error States
- Using separate isLoading and isError booleans that can both be true.
- Leaving the spinner on forever when a request fails silently.
React Loading and Error States— Interview Questions & FAQs
What is the difference between an empty state and a loading state?+
Loading means the request has not finished. Empty means it finished successfully and returned nothing. Showing a spinner for an empty result leaves users waiting for data that will never arrive.