How to Create React Custom hooks to fetch data with async await [ getting started with react ]

Hi, my name is Paul and, I am a self taught web developer. In this React Hooks Tutorial, we will learn how to create our own custom hook. We will use javascript's fetch API with async await to get data.

The cool part about this React tutorial that our component will have the flexibility to be reused. Eliminated code duplication and allowing us to write cleaner code.

If you are looking to become a self taught developer or looking to learn React. This video is for you.

Let me know any other topics you would like me to cover in my next screencast.

----------★ POPULAR VIDEOS ★----------

⚡️ CODING MOTIVATION: Fun Video To Keep You Motivated:

⚡️ MY CHANNEL: Am I Too Old To Learn To Code After Thirty:

⚡️GOOD ADVICE: Should I Learn To Code in 2020:

⚡️ADVICE ON LEARNING: My View On Taking Courses:

⚡️BEST PROGRAMMING LANGUAGE 2020:

⚡️FIRST REACT LESSON: Intro to React and JSX:

The goal of this channel is to help you keep your expectations realistic while working towards your goal of getting a job as a web developer or landing your first freelance gig.

Thank you for your time. Your support is what keeps us going. I know that there is a lot of other how to code channels out there, so thank you for choosing ours.

Happy coding,

Paul--

[CodingAfterThirty]

Thank you guys for checking out this video, appreciate all your support. If you enjoy this content and want it to make it available to others hit that like button. I am still at the beginning of my journey and all your leave and support go a long way. And if you are interested in switching careers late in life into web development then consider subscribing.

[zesuma]

This is amazing and thorough. Huge help for me and easy to follow.

[JordanAF]

I just started learning react so these videos will be very useful!

[CompSciCodeFi]

20:57
I loled! 😂
Great channel, great video.

[WOTBBiggestFan]

Great stuff, dont know if u still check comments here. My q is - When app renders for the first time, and it makes the first call to the useFetchHook, at that time useFetchHook on its first render would only return an array of [null, null, false] based on its state on first render. After this first render, useFetchHook useEffect is triggered and runs the actual sync fetch and gets data, updates its state and re-renders which results in the updated data being returned by the hook to App as an array. App already received the [null, null, false] and it even shows on ur console. Why does App re-render to show the updated data after 2nd return from useFetchHook ? App did not update state, nor was its received props changed, so why would App re-render at all with the newer data?

[stevemcardle]

You need to setIsLoading(true) in the try, then setIsLoading(false) in a finally section for try / catch / finally

[frank]

When’s your next live session? How do we check the schedule lol

[femmiennine]

Have you tried mapping it before return? If yes, maybe you can share it? :D

[pablod.]

what about a custom hook for a post request?

[Pareshbpatel]

Great tutorial on creating and using a React Custom Hook. Thanks.

{2022-08-08}