How to Fetch Data in React With A Custom useFetch Hook 

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!!

You are one of the RU-vidrs who post real-life coding stuff that really helps! Thank you! :)

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.

The best explanation of using a custom hook so far... Hats off 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!!!!!

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😃

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.

First video that i watch of this channel and already loved it, keep making the good work mate

Wow! Thanks Pedro, by watching this video in just 16 min I was able to learn a lot about React & APIs

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.

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

I loved your channel! Already subscribed !

Dude, Thanks much, been searching for this for hours!

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

Really great tutorial - thanks soooooo very much!

Very good and concise explanation, thanks for that!

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.

Excellent brother! Keep it up.💙

Tnak tou very mutch! Your explanations helped me a lot!

thank you man , you are legend

you explains conceps very well

Great Explanation.I love the way you teach

thanks a lot for the video pedro!

thank you so much. I think I can move on from class & redux using this to make action and handle my state

Thanks man, this was very good

Thank you, Pedro!

Exactly what I was looking for!

Thanks for your course, it's helpful.

awesome tutorial. the only this I didn't get is the notation { date?.setup }

Awesome explanation

Your tips helpful for us thank you brother more like this ❤️🙏

Cool stuff! thank u

In fact this is how react-query was invented by Tanner Linsley!

Tnx man it really helped keep it up

really nice tutorial! following right now to see more of these 😀

Simply lucid 👍🙏🏻

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

Nice video brou, I'm going to make my own implementation in typescript for my app

Could U explain how to do post or delete call, in the same custom hook?

What a beutiful solution! Great video, it helped alot!

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.

Very good tutorial

Awesome video, well explained

ROFLMAO... the api jokes is SOOOOOOOOOOOOOOOOOOOOOOOOO FUNNY

I have a double null response before the correct one if for example I console.log the data

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 again for your Nice content

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 video! What theme are you using in VS Code?

Awesome stuff keep it up!

Awesome dude thankssss

Thank you so much bro. Pleas econtinue to make such video

Simple and easy 👍

So good tutorial very useful

Great, thanks!

U saved my life 😂😂

how can I make the hook more dynamic by receiving the method by parameter?

Splendid video 👍

YOU ARE AMAZINGGGGGGGGGGG

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.

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 ?

is this the best way custom hook or react query or redux-toolkit ?

Great video

Great video! How would you recommend making multiple calls in the same component?

its not much easy to instance the setLoading in true in the useState instead inside the useEffect?

Superr

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?

super useful! thanks a lot:>

cool

what if we want to call multiple url /api in a component ?

What is the reason to do this instead of using something like React Query?

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.

Amazing hook...

please continue the graphql series

The api is having payloads then how to set in custom hook

Is it possible to redirect to error page in usefetch hook???

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 RU-vid you can see more videos being loaded.

Would I request you to share a folder structure for e-commerce project with admin panel and frontend for nextjs

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.

Thanks!!!

we need next js full course

Hey, what plugins one needs to use to make VS code look like that? I mean themes/icons

How to call that api again if the state is changed

is there a way to perform post request with this useFetch custom hook

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?

awesome tutorial! How can I use it on a component?

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

Could you explain to me what it means in the code question mark and dot, like here: joke?.setup

useFetch function shouldn't be async? Or it doesn't matter?

Awesome +++++++++++++++++++++++++++++

video starts at 3.57

nicee

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

post, put, delete?

Hi Pedro thanks for the tutorial! Just a little question what extension do you use for auto tabbing your code and automatically adding a ";"?

how about post, or delete request??, do we need to create more hook???

Noice