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 ...
For further actions, you may consider blocking this person and/or reporting abuse
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?
Hi @shatvani
Where do you call useApi? Inside a Functional Component?
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.
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!
Great post!
I'd change just one thing: the
dataobject holds an array also nameddata.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 currentstatetostatusorapiState)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...
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?
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...
Thanks for the answer.
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.
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.
Has any drawbacks writing like:
‘const setPartData = (partialData) => setData(prevState => ({ ... prevState, ...partialData }));‘
It can prevent weird behaviors in more complex environments.