DEV Community

Cover image for How to manage API calls in React ⚛️

How to manage API calls in React ⚛️

Adyasha Mohanty on July 05, 2021

React library is well known for building rich and highly scalable user interfaces. There are many ways to fetch data from an external API in React....
Collapse
 
mpagels profile image
Martin Pagels • Edited

Hey Adyasha Mohanty,

I think I found a huge mistake in your "custom hook" part. You are missing a "return" statement here. Right now it is broken and would break the hole app if useFetch would be imported.

I would add here:
dev-to-uploads.s3.amazonaws.com/up...

Please check your code for errors before publishing it to an audience. You would do that before putting the code into production, wouldn't you?

Collapse
 
dylanwatsonsoftware profile image
Dylan Watson • Edited

Come on, 1 mistake doesn't negate a great article. Especially since the article is to inform, not for you to simply copy and paste.

Great stuff @adyasha8105 !

Collapse
 
mpagels profile image
Martin Pagels

Thx for your feedback. I’m sorry if you thought that one mistake „negated“ the whole article for me.
This was not my goal. I just think it's important to use correct code on this kind of website, especially for users who are learning from this kind of articles. They shouldn't get confused or even discouraged when trying to understand or copy the code snippet and it doesn’t work.

Collapse
 
adyasha8105 profile image
Adyasha Mohanty • Edited

Thank you @dylanwatsonsoftware !
It's so nice of you and I agree I did a mistake. It's not the mistake that matters but what actually matters is how you deal with it, what you learn from it and how you apply that lesson. And I am happy @mpagels pointed out that mistake.

Collapse
 
adyasha8105 profile image
Adyasha Mohanty • Edited

Hey @mpagels ,
Thank you for pointing out a big mistake I did. Sorry for the inconvenience cause to you. I had checked my code but I don’t know how that one line got missed.
Once again thank you Martin. I am glad people are actually reading my code and pointing out mistake.

Collapse
 
mpagels profile image
Martin Pagels

Hey,
good we catched the error together. :-)
Great article by the way.

Collapse
 
sylflo profile image
Sylvain Chateau • Edited

If we are talking about react-query, it would have been nice to at least mentioned SWR

Collapse
 
adyasha8105 profile image
Adyasha Mohanty

Thanks @sylflo for mentioning these things :) I have added another line at the end about other ways for data fetching like SWR and GraphQL.

Collapse
 
sylflo profile image
Sylvain Chateau

My points was that those two libraries do actually pretty much the same thing, and are direct concurrent. But anyways I guess most people already know SWR

Collapse
 
eldan profile image
DiegoDev

amazing post, short and efficient, tnx!

Collapse
 
sajithpj profile image
Sajith P J

I just got some of the best methods for handling apis in react js. I was handling the using the api calls by using a common function. Checkout out my way of handling apis in react js

Collapse
 
mogaozq profile image
Mohammad Barbast

Just react-query, nice and clean

Collapse
 
nemethricsi profile image
Richard

npm react-use-promise is also good :)

Collapse
 
deepakr28 profile image
Deepak Rawat

hey Adyasha, great article, I have a doubt regarding making API calls from the client side, is it a secure if i store API keys as env variables?

Collapse
 
ashutoshdash profile image
Ashutosh Dash

Yes it will be secured.