The answer
Track a loading flag set to true before the fetch and false after. While loading is true, show a spinner, skeleton, or placeholder so the user knows something is happening and the screen is not blank.
How to Handle Loading and Error States When Fetching APIs in React
How do I show a loading state in React?
More FAQs in How to Handle Loading and Error States When Fetching APIs in React
Three main states: loading, error, and success. Track them with separate state variables so the UI can respond to each appropriately, plus an empty state for successful fetches that return no data.
Wrap the fetch in try/catch, set an error state on failure, and render an error message with a retry option. Never leave the user staring at a blank screen after a failure.
To set loading to false whether the fetch succeeded or failed. If you only set it after success, an error leaves the spinner spinning forever. A finally block guarantees the loading state always ends.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.