How to Fetch Data in React With A Custom useFetch Hook
Vložit
- čas přidán 22. 08. 2021
- In this video I will show how to make a custom useFetch hook in react. The hook allows you to fetch data from an api both on render and lazily.
API: v2.jokeapi.dev/joke/Any
Code: github.com/machadop1407/custo...
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Email: machadop1407@gmail.com
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial - Věda a technologie
![ReactJS Course [7] - How To Fetch Data From an API in React](http://i.ytimg.com/vi/je3FTTunyp4/mqdefault.jpg)
awesome work again - i am 52 years old - i am training to become a blockchain dev but now i am hooked on react which is still essential for blockchain work - i am inspired by guys like yourself - you guys are genius!!
Well done sir
You are awesome too!
These type od comments motivates me
not worth it learning it at 52, seriously not worth it..... unless you're totally insane or 1 in a million genius quick learner
@@aryankumar87771 Let other people do what they want to do
You are one of the CZcamsrs who post real-life coding stuff that really helps! Thank you! :)
The best explanation of using a custom hook so far... Hats off man.
The refetch was gold! Thank you man!
Thank you very much for the video, after struggling to fetch some data from an API that I created, finally nailed it thanks to your help!!!!!
This is great. I recently switched from Angular to react and was wondering, how to seperate http from component as in angular we have services, here we have custom hooks to take care of it. Great tutorial bud😃
Really good video my dude, didn't know you could return a function and call it like that. Very useful keep these react tricks coming. I would like to see some more real life examples of custom hooks so maybe you could make a custom hook series.
Thank you for teaching me react! I’ve been watching your videos for a few months now and have learned more here than I have in college.
yet all these jobs want college graduates. this whole industry is honestly retarded these days.
They tech react in college?
@@kevyyar yes and angular.
Thanks so much man. I really needed to know how to use custom hooks in callback function and you have just made it easy for me. Thanks
Wow! Thanks Pedro, by watching this video in just 16 min I was able to learn a lot about React & APIs
Dude, Thanks much, been searching for this for hours!
Thanks so much for the tutorials. They have been helping me alot. The crud tutorial with mysql helped me understand the connection between the client and server files. Thanks keep doing what you do.
Thank you bro. I knew about custom hooks. But i didn't use it. That was really cool. I will be using it on every project from now on.
First video that i watch of this channel and already loved it, keep making the good work mate
Thank you! Welcome to the channel :)
Great Explanation.I love the way you teach
Very good and concise explanation, thanks for that!
Great video ! Clever and simple code, love it !
Excellent brother! Keep it up.💙
Good explained use api call with custom hooks. Thank you!
Really great tutorial - thanks soooooo very much!
Exactly what I was looking for!
thanks a lot for the video pedro!
Thankyou so much for the explanation. I have watched your video for the first time and you explained really well that I subscribed your channel immediately after the video finished.
really nice tutorial! following right now to see more of these 😀
Thanks for your course, it's helpful.
Thanks man, this was very good
Thank you, Pedro!
Tnx man it really helped keep it up
Excellent info bro!!!
Tnak tou very mutch! Your explanations helped me a lot!
What a beutiful solution! Great video, it helped alot!
I loved your channel! Already subscribed !
Thank you so much 🤗
Great vídeo again!
It would be interesting to bring some videos of React using Typescript too.
Thank you! I will make more ts videos!
thank you man , you are legend
Awesome explanation
Simply lucid 👍🙏🏻
That was a very useful video! I am doing my final project for my degree, which includes some data fetching from facebook and this will be very useful
Using a premade hook will improve the code quality! Good luck in the project :)
you explains conceps very well
Cool stuff! thank u
Awesome video, well explained
Thank you!
So good tutorial very useful
super useful! thanks a lot:>
Awesome dude thankssss
Very good tutorial
Excellent tutorial on fetching data using a custom react hook. Thanks, Pedro
{2022-02-14} , {2022-02-18}, {2023-08-06}
Simple and easy 👍
thank you so much. I think I can move on from class & redux using this to make action and handle my state
Thank again for your Nice content
Great video plz keep it up 🚀
Thank you!
Awesome stuff keep it up!
Appreciate it!
Nice video brou, I'm going to make my own implementation in typescript for my app
Amazing hook...
Great, thanks!
thanks for the tutorial and github repo ... you're the best! are you planing on doing an updated one with the async/await with the new features of react 18 ?
Great video
Splendid video 👍
Glad you enjoyed it!
YOU ARE AMAZINGGGGGGGGGGG
you are amazing!
Your tips helpful for us thank you brother more like this ❤️🙏
More to come!
@@PedroTechnologies waiting 😍
Superr
Great video! How would you recommend making multiple calls in the same component?
U saved my life 😂😂
Always precise 🔥, i have a doubt that instead of creating another fxn we can pass a variable as the dependencies of useEffect so whenever the btn got clicked , new joke gets fetched
Thanks!!!
Valeu, man!
Hey, what plugins one needs to use to make VS code look like that? I mean themes/icons
awesome tutorial. the only this I didn't get is the notation { date?.setup }
ROFLMAO... the api jokes is SOOOOOOOOOOOOOOOOOOOOOOOOO FUNNY
Great video! What theme are you using in VS Code?
Electron theme!
How would you handle a situation where you are constantly polling data? When I do that, the screen flashes for a second because for a split second there while the information hasn't arrived yet, the UI cannot be displayed.
nicee
Thank you so much bro. Pleas econtinue to make such video
awesome tutorial! How can I use it on a component?
Hi Pedro, just a small enquiry about reusing the useFetch custom hook as shown to fetch the data. Suppose if we have a page which has multiple components that needs data from different APIs and in this case can useFetch hook be reused by all components at a same time? Because useFetch can receive an single url at a time and has single loading and error states, how can this be possible? or if can be reused at a same time then copies of useFetch hook is created in the memory to serve the purpose?
yeah you can reuse it, just make sure to give the values that are returned from the hook different names so you don't have a conflict. You can do so like this:
const { data: usersData, loading: usersLoading, error: usersError, refetch: usersRefetch } = useFetch(...)
this way you're still destructuring the variables you get from the hook, but give them different names
@@ApartTour Thanks for your information
Very Well explained.👌
Thank you🤝
How to handle multiple API calls in single component?
I also have this question. I believe the way you can is by simply naming the arguments differently. Which is messy, but still possible.:/
I didn't know where to look for this, but how can I fetch more data whenever I'm close to the bottom of the page? ie whenever you scroll super fast to the bottom on CZcams you can see more videos being loaded.
we need next js full course
nice
Hey pedro could you make a video where you use an api that asks for header and rate limits? because can't seem to find a video online that teaches how to follow an api requirements of use. Its all these simple api's that has no prerequisites/restrictions. Basically, how to use an api with oauth2 & rate limiting?
In fact this is how react-query was invented by Tanner Linsley!
I was wondering if this would cause memory leaks when there are 2 or more components using the usefetch hook, but with different API endpoints.
cool
Hi Pedro thanks for the tutorial! Just a little question what extension do you use for auto tabbing your code and automatically adding a ";"?
Hey, the extension is prettier!
@@PedroTechnologies Thanks for this excellent videos. Although I find your video very useful nad clever, the jokes that API link display are clearly offensive for gays, blacks and Jews. I would recommend you use different API resources for teaching coding.
how can I make the hook more dynamic by receiving the method by parameter?
Noice
can we expand this to support different API calls like post, put, and delete?
maybe make it useAPI ?
I'm not sure because then we will need to call the hook using some conditions and that doesn't work with hooks
what if we want to call multiple url /api in a component ?
Great video! But what if you want to post data. How can you go by? I will appreciate if you can do a video on it. Thank you.
You can do the same thing, but also put an argument to the hook that represents the body of the post request :)
I have a double null response before the correct one if for example I console.log the data
Awesome +++++++++++++++++++++++++++++
its not much easy to instance the setLoading in true in the useState instead inside the useEffect?
is there a way to perform post request with this useFetch custom hook
Is it possible to redirect to error page in usefetch hook???
please continue the graphql series
I will continue, I want to post some other stuff in between as well! Next gql episode is already recorded and will come out tomorrow!
Could U explain how to do post or delete call, in the same custom hook?
I have been searching for the same thing. have you found anything? if yes could u share please?
i keep getting this error: Error: (0 , _Hooks_useFetch__WEBPACK_IMPORTED_MODULE_2__.default) is not a function
im using typescript, I searched everywhere but cant find a solution, even chatGPT aint helping
i get this type of error Cannot destructure property 'data' of '(0 , _useFetch__WEBPACK_IMPORTED_MODULE_1__.default)(...)' as it is undefined.
TypeError: Cannot destructure property 'data' of '(0 , _useFetch__WEBPACK_IMPORTED_MODULE_1__.default)(...)' as it is undefined.
Since you are returning at the end of the useFetch function, your component that calls useFetch will never see the loading state until it is true.
What is the reason to do this instead of using something like React Query?
The api is having payloads then how to set in custom hook