2020-12-04
5552
#react
Gigi Sayfan
243
Dec 4, 2020 â‹… 19 min read

A comprehensive guide to data fetching in React

Gigi Sayfan Gigi has been developing software professionally for more than 20 years in domains as diverse as instant messaging, morphing, chip fabrication process control, embedded multimedia applications for game consoles, brain-inspired machine learning, custom browser development, web services for 3D distributed game platforms, IoT sensors, and virtual reality.

Recent posts:

When To Use Flexbox And When To Use CSS Grid

When to use Flexbox and when to use CSS Grid

Flexbox and Grid are the heart of modern CSS layouts. Learn when to use each and how they help build flexible, responsive web designs — no more hacks or guesswork.

Leonardo Maldonado
Jun 3, 2025 â‹… 9 min read
CSS Breakpoints For Responsive Design

Using CSS breakpoints for fluid, future-proof layouts

Responsive design is evolving. This guide covers media queries, container queries, and fluid design techniques to help your layouts adapt naturally to any screen size.

Rob O'Leary
Jun 3, 2025 â‹… 13 min read
How To Use ForwardRef In React

React forwardRef explained: Usage, alternatives, and React 19 update

ForwardRef lets you pass refs through components to access child DOM nodes directly — learn how and when to use it in React 18 and earlier.

Peter Ekene Eze
Jun 3, 2025 â‹… 14 min read
A Complete Guide to the useEffect React Hook

How to use the useEffect hook in React: A complete guide

Whether you’re new to React Hooks or need a 2025 refresh, this guide to useEffect gives you the tools to use it effectively — and cleanly.

Sebastian Weber
Jun 3, 2025 â‹… 18 min read
View all posts

13 Replies to "A comprehensive guide to data fetching in React"

  1. Thank you so much. This is a very nice primer. Also, your “redaction” technique made me read the whole article 🙂

  2. Wow this is an amazing article. Thank you! I’m just wondering how would you design it further because I can imagine that in a big app, would have a lot of useEffects() for different endpoints and with that multiple try catches that might do the same thing based on the error (e.g. opening and passing an error message to a modal component). My questions boils down to two, (a) is it ok to have a long code with many useEffects? (b) Is there a way to generally handle errors thrown from fetch() inside any useEffects?

  3. I’m glad you like the article, Tim. to your questions:
    (a) this is up to you, but the idea is that fetching data from an endpoint is a pretty generic activity. the difference for different endpoints is the endpoint URL, the (optionally) parameters you need to pass, where you want to store the response in the state (either successful or an error). All of these can be parameterized.
    (b) yes. inside any useEffect() call a single generic function as I mentioned in (a) that will be responsible for actually hitting the endpoint if there was an error catching it and storing it in the state for later handling.

  4. Why are you using this.setState() to set states in hooks? Why didn’t you use the setData() to set the data and isFetching?

  5. Hey, great article! I’m trying to do something very similar. I am loading in data from an API and saving it into the context. Then I am trying to use my data throughout my app in a Context Consumer. The issue is that the data hasn’t been downloaded yet when the consumer tries to use it and causes undefined errors. How can I get around this?

  6. Hey Mike, you should be aware if the data has already been downloaded or not. If it’s not ready yet you should display a message like “fetching data…”. the isFetching flag tells you if you’re still fetching or not.

  7. Great article! I’m a new-comer to web development (but not development in general). This helped answer my question about the first empty render…I wasn’t quite sure how to deal with it. This helped point the way.

  8. Thanks for this! As a relative newbie to React and frontend development (but a decades-long backend developer who recently retired), I noted a couple of things:

    * Traditional (class based) React is obviously relevant for legacy apps,
    but the world seems to be going much towards Hooks (which is
    definitely where I am focused).

    * One short section on Hooks and useEffect() is not enough! Lots of people
    will blog about “you should fetch data in useEffect()” without explaining why.
    And, even after pounding my head against this over and over, the dependencies
    second argument to useEffect() doesn’t sink in, but has dramatic impacts.

    Maybe a post focused on this subject would be helpful.

  9. Great article! I really enjoyed the discussion of pros and cons on each approach. I would love to hear any information you have on effective frontend caching. Are there any libraries or techniques you could recommend?

  10. nice article, just fetching URL data and form data (i.e PHP $_GET[“”] and $_POST[“”]) is missing. Thanks

    1. Hi Sergey, thanks for reading. XSRF is not a typo; in this case, the X stands for the word “cross.” Hope that clears things up!

Leave a Reply