How to Fetch Data in React With A Custom useFetch Hook
ฝัง
- เผยแพร่เมื่อ 22 ส.ค. 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 - วิทยาศาสตร์และเทคโนโลยี
![[UNCUT] ย้อนฟัง 2 บิ๊กตำรวจปะทะกัน "บิ๊กโจ๊ก VS รองแต้ม" ฟ้องเรียก 10 ล้าน!! I คนดังนั่งเคลียร์](http://i.ytimg.com/vi/vNpTtVjdcBo/mqdefault.jpg)
![[TH] VCT Pacific Stage 2 - Week 3 Day 3 // DFM vs PRX | DRX vs TLN](http://i.ytimg.com/vi/il3Twexat3A/mqdefault.jpg)
You are one of the TH-camrs who post real-life coding stuff that really helps! Thank you! :)
The best explanation of using a custom hook so far... Hats off man.
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
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!!!!!
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
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.
First video that i watch of this channel and already loved it, keep making the good work mate
Thank you! Welcome to the channel :)
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.
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!
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.
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.
Very good and concise explanation, thanks for that!
Good explained use api call with custom hooks. Thank you!
Great Explanation.I love the way you teach
Thanks for your course, it's helpful.
Exactly what I was looking for!
Really great tutorial - thanks soooooo very much!
thanks a lot for the video pedro!
Tnak tou very mutch! Your explanations helped me a lot!
Great video ! Clever and simple code, love it !
Thank you, Pedro!
really nice tutorial! following right now to see more of these 😀
Thanks man, this was very good
Excellent brother! Keep it up.💙
Tnx man it really helped keep it up
Awesome explanation
I loved your channel! Already subscribed !
Thank you so much 🤗
thank you man , you are legend
Excellent info bro!!!
Simply lucid 👍🙏🏻
you explains conceps very well
What a beutiful solution! Great video, it helped alot!
Very good tutorial
Cool stuff! thank u
thank you so much. I think I can move on from class & redux using this to make action and handle my state
Simple and easy 👍
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!
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 :)
So good tutorial very useful
Awesome dude thankssss
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 ?
Amazing hook...
Excellent tutorial on fetching data using a custom react hook. Thanks, Pedro
{2022-02-14} , {2022-02-18}, {2023-08-06}
Nice video brou, I'm going to make my own implementation in typescript for my app
Thank again for your Nice content
Awesome video, well explained
Thank you!
Awesome stuff keep it up!
Appreciate it!
Superr
Great video plz keep it up 🚀
Thank you!
Your tips helpful for us thank you brother more like this ❤️🙏
More to come!
@@PedroTechnologies waiting 😍
Great video
super useful! thanks a lot:>
Great video! How would you recommend making multiple calls in the same component?
YOU ARE AMAZINGGGGGGGGGGG
Splendid video 👍
Glad you enjoyed it!
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
awesome tutorial. the only this I didn't get is the notation { date?.setup }
you are amazing!
Thanks!!!
U saved my life 😂😂
Valeu, man!
Great video! What theme are you using in VS Code?
Electron theme!
cool
Thank you so much bro. Pleas econtinue to make such video
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.:/
nicee
nice
we need next js full course
I have a double null response before the correct one if for example I console.log the data
awesome tutorial! How can I use it on a component?
ROFLMAO... the api jokes is SOOOOOOOOOOOOOOOOOOOOOOOOO FUNNY
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?
Hey, what plugins one needs to use to make VS code look like that? I mean themes/icons
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
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.
Awesome +++++++++++++++++++++++++++++
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.
In fact this is how react-query was invented by Tanner Linsley!
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.
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 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 TH-cam you can see more videos being loaded.
Noice
how can I make the hook more dynamic by receiving the method by parameter?
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?
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!
what if we want to call multiple url /api in a component ?
its not much easy to instance the setLoading in true in the useState instead inside the useEffect?
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
thanks man youre doing a great job
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.
is there a way to perform post request with this useFetch custom hook
Would I request you to share a folder structure for e-commerce project with admin panel and frontend for nextjs
I have a video going over an advanced folder structure for a react app! I would follow something like that :)
@@PedroTechnologies thanks for quick reply,
yes I have seen that
I want to implement two theme
Admin panel and frontend in same src folder
Is it possible to redirect to error page in usefetch hook???
The api is having payloads then how to set in custom hook
How to call that api again if the state is changed