Day 8 of 14 30 minLoading statesErrorsRace conditions
Load data from an API in a component. Handle loading, error and empty states, refetch when inputs change, avoid race conditions with cleanup and AbortController, and see why most apps use a data library like TanStack Query.
By the end of today you can
- Fetch data in an effect and store it in state
- Show loading, error and empty states
- Re-fetch when a prop or search term changes
- Prevent race conditions with an ignore flag or AbortController
- Explain what data-fetching libraries add
What's inside
- 4 sections
- 3 diagrams and mind maps
- 2 code examples you can run
- 5-question quiz
- 1Loading, error and success
- 2With a real API
- 3Refetching and race conditions
- 4Use a data library in real apps
Sign in free to read this lesson
Get the full lesson with diagrams, runnable code and the quiz. Your progress is saved across devices.
Sign in free