How do you show loading and error states when fetching data?
Model answer
Keep state for data, loading and error. Set loading to true before the request, catch failures to set error, and set loading to false in finally. Render a spinner when loading, a message when there is an error, and the data otherwise.
Do not forget to handle an empty result as its own state.
Learn this topic
TanStack Query (React Query): Fetching, Caching and Updating Server Data in the course React.js Full Course: Beginner to Advanced.
Sign in to add your own answer.
More questions
- What does TanStack Query (React Query) give you over useEffect and fetch?
- What is the difference between server state and client state?
- When do you need Redux, Zustand or another state library?
- What is Redux Toolkit and why is it recommended over plain Redux?
- What is optimistic UI and how can you build it?
- How do you handle authentication tokens in a React app securely?