How do you handle loading, error and empty states for API data in React?
Model answer
Track the three states plus the data. Show a loading indicator while pending, a retry-able error message on failure, and an empty-state message when the list is empty. TanStack Query exposes isPending and isError, which removes much of this boilerplate.
Learn this topic
useEffect and Fetching Data from Your API: Loading, Errors and Cleanup in the course MERN Stack Full Course: MongoDB, Express, React and Node.js.
Sign in to add your own answer.
More questions
- How does a React app call an Express API?
- How do you set up a Vite proxy for development?
- How do you serve a React build from Express?
- How do you handle authentication state in a MERN frontend?
- How do you build a dashboard with filters and pagination backed by the API?
- How do you share validation and types between frontend and backend?