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!!
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😃
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 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.
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.
It basically means that if the joke variable is null (meaning that the data from the api hasn't arrived yet) you then don't access the setup field since it wont exist.
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
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 ?
You can make another function inside of the hook which takes in a body as an argument and use the body to make a post request. Same thing with the delete 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 UA-cam you can see more videos being loaded.
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.
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
@@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.
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
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.
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
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?
Hi Pedro! Thank you for this video. Is it just me or does the API request gets called twice? I checked on the Network tab, and I can see two network requests when the application is started / first render. Is this OK? I was expecting this to only make ONE CALL to the api. Let me know what you think about this.
Don’t worry, that’s normal. In your Index.js file you will see that React Strict Mode is on by default; this causes various behaviour including useEffects to fire twice for some reason.
Remove the outer strict mode tags and the API call should only fire once
The reason this is happening, since React 18, is that in "development mode" (as Chris said - in Strict Mode) React mounts, unmounts, and mounts again all of the components. This way it's testing, and you can tell, if you properly e.g. cleaned up your useEffect in the return function, which can cause issues and memory leaks if not handled properly. I guess there are some other reasons, but I hope that now you have more context and know what to look for. :) Cheers!
why those who make programming videos do not listen to their own video he would hear the deafening noise of their keyboard...there are keyboards with soft keys that are not noisy
My keyboard changed is different now, back then that was the only keyboard i could afford. I can't have a perfect setup since the beginning. Im glad that now im able to afford better setup!
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 UA-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.
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.
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!!!!!
Wow! Thanks Pedro, by watching this video in just 16 min I was able to learn a lot about React & APIs
The refetch was gold! Thank you man!
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😃
Dude, Thanks much, been searching for this for hours!
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.
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 :)
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
Excellent tutorial on fetching data using a custom react hook. Thanks, Pedro
{2022-02-14} , {2022-02-18}, {2023-08-06}
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!
Good explained use api call with custom hooks. Thank you!
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.
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.
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 :)
Very good and concise explanation, thanks for that!
I loved your channel! Already subscribed !
Thank you so much 🤗
you explains conceps very well
thank you so much. I think I can move on from class & redux using this to make action and handle my state
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?
Great video! What theme are you using in VS Code?
Electron theme!
Really great tutorial - thanks soooooo very much!
Nice video brou, I'm going to make my own implementation in typescript for my app
really nice tutorial! following right now to see more of these 😀
Could you explain to me what it means in the code question mark and dot, like here: joke?.setup
It basically means that if the joke variable is null (meaning that the data from the api hasn't arrived yet) you then don't access the setup field since it wont exist.
@@PedroTechnologies Thank you :)
Excellent brother! Keep it up.💙
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 :)
Tnak tou very mutch! Your explanations helped me a lot!
Your tips helpful for us thank you brother more like this ❤️🙏
More to come!
@@PedroTechnologies waiting 😍
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.
Great Explanation.I love the way you teach
awesome tutorial. the only this I didn't get is the notation { date?.setup }
Thanks for your course, it's helpful.
I have a double null response before the correct one if for example I console.log the data
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 ?
how about post, or delete request??, do we need to create more hook???
You can make another function inside of the hook which takes in a body as an argument and use the body to make a post request. Same thing with the delete request
how can I make the hook more dynamic by receiving the method by parameter?
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.:/
is this the best way custom hook or react query or redux-toolkit ?
thanks a lot for the video pedro!
Hey, what plugins one needs to use to make VS code look like that? I mean themes/icons
its not much easy to instance the setLoading in true in the useState instead inside the useEffect?
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 UA-cam you can see more videos being loaded.
Great video! How would you recommend making multiple calls in the same component?
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.
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
what if we want to call multiple url /api in a component ?
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
What a beutiful solution! Great video, it helped alot!
Awesome explanation
Awesome video, well explained
Thank you!
Thanks man, this was very good
useFetch function shouldn't be async? Or it doesn't matter?
It would be async if you want to use async await. Here .then().catch() is used that does not require function to be async
Is it possible to redirect to error page in usefetch hook???
thank you man , you are legend
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.
So good tutorial very useful
Tnx man it really helped keep it up
Great video plz keep it up 🚀
Thank you!
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
Exactly what I was looking for!
Great video ! Clever and simple code, love it !
is there a way to perform post request with this useFetch custom hook
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.
awesome tutorial! How can I use it on a component?
In fact this is how react-query was invented by Tanner Linsley!
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
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?
ROFLMAO... the api jokes is SOOOOOOOOOOOOOOOOOOOOOOOOO FUNNY
Simply lucid 👍🙏🏻
Thank you, Pedro!
Hi Pedro! Thank you for this video. Is it just me or does the API request gets called twice? I checked on the Network tab, and I can see two network requests when the application is started / first render. Is this OK? I was expecting this to only make ONE CALL to the api. Let me know what you think about this.
Don’t worry, that’s normal. In your Index.js file you will see that React Strict Mode is on by default; this causes various behaviour including useEffects to fire twice for some reason.
Remove the outer strict mode tags and the API call should only fire once
The reason this is happening, since React 18, is that in "development mode" (as Chris said - in Strict Mode) React mounts, unmounts, and mounts again all of the components. This way it's testing, and you can tell, if you properly e.g. cleaned up your useEffect in the return function, which can cause issues and memory leaks if not handled properly. I guess there are some other reasons, but I hope that now you have more context and know what to look for. :) Cheers!
Excellent info bro!!!
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 is the reason to do this instead of using something like React Query?
Simple and easy 👍
The api is having payloads then how to set in custom hook
Very good tutorial
Thank you so much bro. Pleas econtinue to make such video
Splendid video 👍
Glad you enjoyed it!
we need next js full course
Thank again for your Nice content
How to call that api again if the state is changed
aren't you hammering the api though because useFetch will be called everytime App component rerenders?
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.
Awesome stuff keep it up!
Appreciate it!
Cool stuff! thank u
when's graphql ep.4 ?
Coming soon :)
U saved my life 😂😂
Amazing hook...
post, put, delete?
Awesome dude thankssss
super useful! thanks a lot:>
Bro I got a non veg joke 😂😂😂😂😂😂😂😂😂
why those who make programming videos do not listen to their own video he would hear the deafening noise of their keyboard...there are keyboards with soft keys that are not noisy
My keyboard changed is different now, back then that was the only keyboard i could afford. I can't have a perfect setup since the beginning. Im glad that now im able to afford better setup!
You talk as if he owes you something. He owes you nothing.