DEV Community

Ways of Getting Data from API in React

Olena Drugalya on April 05, 2021

This blog post is about the ways of getting data from API in React. Before you read this post, you should be familiar with React library and Appli...

Read full post

Steve Griffith • Apr 9 '21

Here is a playlist of videos about React that I made for my students - https://www.youtube.com/watch?v=vTFVg6I2wNI&list=PLyuRouwmQCjm1N4jlJ7b3WWjDA8MjfDbg
Hope it helps you learn faster.

Steve Griffith • Oct 6 '21

I started posting a new YouTube playlist last week about React in 2021 that includes all the newer features of React.

• Apr 11 '21

Great article!

If any reader is interested in a more in-depth video guide that covers each of these data-fetching strategies, you can check out my post here: reedbarger.com/fetch-data-in-react

Leandro Gutierrez • Apr 6 '21 • Edited

Great post! I discovered other library very interesting, it's SWR by Vercel :)

Sean • Apr 6 '21

Is the try catch useful for an async api call? If the promise rejects, the catch will not be triggered.

zer0 • Apr 9 '21

There is actually situations where using axios, “try/catch” & async/await can cause unwanted behaviour.
At least for me it did.
E.g. when using interceptors a failed request might not end up in catch.

Sean • Apr 6 '21

Nevermind, just read it does actually throw :D

Pavel Ermakov • Apr 8 '21

How to cancel the request once the component is unmounted?

Olena Drugalya • Apr 8 '21

Why would you need to cancel it? It performed just one time

Pavel Ermakov • Apr 8 '21

Imagine you are setting state on a successful response. If the component is unmounted before the response is back, you will get an error, something like "Unable to set state on unmounted component"

Olena Drugalya • Apr 8 '21

In this case you can introduce a variable to track if the component is unmounted or not. If you use functional component, you can write something like this:
useEffect(() => {
let isMounted = true; // track whether component is mounted

request.get(url)
  .then(result => {
    if (isMounted) {
      setState(result);
    }
  });

return () => {
  // clean up
  isMounted = false;
};

}, []); // only on "didMount"

zer0 • Apr 9 '21

What’s a bit missing In this post is:
In the topic index you mention graphQL (6.) but you only mention it as a side note together with react-query-library.
“ways of fetching data” is a bit confusing to me. Axios and fetch-api are library’s for sending requests. Everything else is ways to structure/time sending requests. A bit confusing in my perspective.

Andrew Baisden • Apr 5 '21

Great explanation.

Olena Drugalya • Apr 5 '21

Thank you!

Danny Adams • Apr 5 '21

Another nice article! I'd never heard of the fetch-hook before, pretty cool :)

Brian Canzanella • Apr 5 '21

Nice post, thanks!

johannchopin • Apr 6 '21 • Edited

If you need to quickly create a custom REST API for testing the fetch process, I would recommend you to have a look at the restapify library.

Bret Williams • Apr 6 '21

I love articles that present implementations with clear examples and options like you have.

Rospars Quentin • Apr 7 '21

I never thought about making a custom hook for API calls oO I feel kinda stupid now haha
Thanks for that realization!

Olena Drugalya • Apr 7 '21

You are welcome :)

Fahad Khan • Apr 7 '21

I have read this blog and enjoyed it a lot but I have a question,
Which way is the best way for fetching data from backend?
I use Axios for this

Olena Drugalya • Apr 8 '21

There is really no better way :) use what is suitable for your needs. If you ask me, I use Axios just to avoid that extra line of code to transform data to JSON object, but it requires additional import ....most people prefer fetch() because it is already built-in method