Study guide: Data fetching in React

Learning to fetch data in React is one of the first things you'll learn as you get started with React. But it's not so straightforward - do you use React Query out of the box? Or just stick to useEffect?
And even after you're built an app or two, there are still some tricky parts to be aware of - like race conditions, network waterfalls and more.

So how should you go about learning data fetching in React?
Here is a step by step guide based on where you are on your React journey!

STAGE 1 - Starter

You're just getting started with React and you just want to display some data.

Since you're just learning, it's ok to fetch data with useEffect, so you understand how it works. You should also understand the difference between fetching data based on some user action (e.g. a click) and on page load.

Checklist

• [ ] build a component that fetches data on click using fetch api - for example, build a movie search page
• [ ] build a component that fetches data on page load using useEffect - for example, fetch the top 10 articles from Hacker News

Useful resources

• [ ] https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
• [ ] https://www.robinwieruch.de/react-hooks-fetch-data/

STAGE 2 - Builder

You're ready to build things the proper way, so you want to follow production app best practices.

By now you've reached the limit of useEffect for data fetching - you need to manually handle loading and error states, you need to manually ignore old requests and the code is getting harder to follow. This is where using an external library like React Query becomes very handy.

You want to:

• understand why it's not a good idea to fetch data with effects in production
• try out react query for data fetching (understand how to install it, query keys etc)

Checklist for "Builder" stage:

• [ ] Setup React Query in an app and use it to fetch data - for example, you could build a public holidays app using React Query or a Github repository search

Useful resources

• [ ] https://tkdodo.eu/blog/why-you-want-react-query
• [ ] https://reactpractice.dev/articles/data-fetching-with-useeffect-why-you-should-go-straight-to-react-query-even-for-simple-apps/
• [ ] https://tanstack.com/query/latest/docs/framework/react/quick-start

STAGE 3 - SHIP

You know how to use React Query and can confidently use it to fetch data.
But how do you handle updates? What if you update the data on one page and you need another page to refresh?

This is the time to get familiar with mutations and cache invalidation.
You should also become familiar with React Query defaults for stale data, so you can tweak them for your needs.

Checklist

• [ ] Build a CRUD app that talks with a real API and uses React Query for data fetching and mutations - for example, a Google Keep clone

Useful resources

• [ ] https://tanstack.com/query/latest/docs/framework/react/guides/important-defaults
• [ ] https://tanstack.com/query/latest/docs/framework/react/guides/mutations
• [ ] https://tanstack.com/query/latest/docs/framework/react/guides/invalidations-from-mutations

STAGE 4 - GROW

After building a few apps and getting familiar with data fetching, you might bump into some common problems when building apps:

• request waterfalls
• race conditions

This is advanced content that you may or may not use in your app, but it's good to be aware of.

The best resources for this stage come from Nadia and they're longer reads, but can really help you understand data fetching in depth.

Useful resources:

• [ ] How to fetch data in React with performance in mind - Goes over what constitutes performance - different ways to orchestrate loading -, loading data in parent > child hierarchies, request waterfalls
• [ ] Fetching data in React: the case of lost promises - Goes over race conditions and how to fix them

STAGE 5 - EXPLORE

You probably noticed we haven't mentioned anything about server side data fetching. Or fetching and routing.
This stage is where you can dip your toes into that, if you want to or as work projects require.

Here are some directions you can go towards:

• Explore alternatives to React Query - like RTK Query, useSwr
• Use router loaders for data fetching - with React Router or TanStack router
• Explore server side rendering and taking advantage of React Server Components - using NextJS, React Router framework mode (previously Remix) or even TanStack Start (still in beta)
• Learn about the new use API and streaming data from the server to the client (and using Suspense and ErrorBoundary)

Useful resources

• [ ] How to fetch data in React - overview of different ways to fetch data in React apps
• [ ] Modern data fetching in React - discussion of how your choice of architecture influences your data fetching strategy