DEV Community

the correct way to fetch data with react hooks

Nico Martin on April 12, 2020

One thing first. I really like the flexibility of React. Going through the official React documentation I don't find a lot of must-use patterns or ...
Collapse
 
shatvani profile image
shatvani

Thank you for sharing your knowledge. I learn React and I'm happy to read a practical example, at last. But I have an error when I try to run the code:
'React Hook "React.useState" is called in function "datasource" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks'
datasource is my useApi.
Could you help me, please?

Collapse
 
nicomartin profile image
Nico Martin

Hi @shatvani
Where do you call useApi? Inside a Functional Component?

Collapse
 
shatvani profile image
shatvani

Hi,
Yes, from another functional component.
But now I have started a course in Udemy, because it is a hard stuff just to jim in it.
Thank you.

Thread Thread
 
nicomartin profile image
Nico Martin

Yes, that makes sense. I guess React does not see "datasource" as a component and therefore you can't use a hook inside of it. But if you lear it bottom up with udemy thats definately a great idea!
Have fun!

Collapse
 
targumon profile image
Amnon Sadeh

Great post!
I'd change just one thing: the data object holds an array also named data.
Yes, this is one of the "only two hard things in Computer Science"...
I think I would actually call that object state (and rename the current state to status or apiState)

Collapse
 
rvasquez profile image
Rogger Vasquez

Hello @nicomartin , thanks a lot for sharing this, I loved this approach.

However I noticed that implementing this will give a linter rule error for react-hooks/exhaustive-deps because the UseEffect will depend on external data: url and SetPartData.

So I moved the SetPartData inside the UseEffect hook, put url in the dependency array (It will not change so I don't see a problem here) and made a functional update for the setData()

Please let me know what you think about this (I also made some renaming having in count the advice @targumon shared):

github.com/r-vasquez/React_mock_re...

Collapse
 
mykel profile image
Michaël Fischer

Hi @nicomartin ,

Thanks for your great post. I would like to know, with the same sample code, in addition to the error message, how would you display a "Retry" button to fire a new API call?

Collapse
 
nicomartin profile image
Nico Martin • Edited

Hi @mykel ,
Excellent question! In that case I think I would just move the loading logic into a new function that I can then return from the hook as well:
gist.github.com/nico-martin/24de58...

Collapse
 
mykel profile image
Michaël Fischer

Thanks for the answer.

Collapse
 
rs_silvaba profile image
Ricardo Santos

Hi, I am new to react. It is really not obvious to me what is the benefit of this.
It just looks a bit harder to read.

Other than not being clear about the component current state what else is the issue? could you point other articles that tackle the same problem? I could not really find anything on why having multiple states is bad or has any drawbacks.

Also how is this different from adding a isLoading and isError prop to the stats state for example?

Thank you.

Collapse
 
nicomartin profile image
Nico Martin

The benefint is that you decouple logic (fetch) from render view.
I mean it's perfectly fine to call an api right inside your component and write the state-logic there as well. But decoupling makes it cleaner in my oppinion.
Especially if you then need to write unit tests you will benefit from this flexibility.

Collapse
 
amn3s1a2018 profile image
Amn3s1a2018

Has any drawbacks writing like:
‘const setPartData = (partialData) => setData(prevState => ({ ... prevState, ...partialData }));‘
It can prevent weird behaviors in more complex environments.