Data fetching

Most real-world data lives behind a URL. Learn how to fetch it from a remote endpoint and handle the loading and error states that come with it.

Members only
5 minutes read

Outline (draft)

  • When to fetch instead of import: live data, large datasets, user-driven queries, anything that changes after you ship.
  • The canonical pattern: useEffect with an empty dependency array, fetch() inside, useState for the result.
  • Three states to track: loading, error, data. Each one is a different render branch (full coverage of the UI side in the spinner lesson).
  • d3 helpers: d3.csv() and d3.json() fetch and parse in one call. Worth knowing.
  • The race condition trap: when props change mid-flight, the old response can overwrite the new one. Mention the cleanup function or ignore flag pattern.
  • CORS and friends: brief callout about why fetch sometimes fails on real APIs.

Oh no! 😱

This lesson isn’t available just yet.

Take a look at the status badges next to each lesson in the sidebar to see when it’s coming out.

Thanks for your patience! 🙏

← Previous

Static dataset

Next →

Data wrangling