Build react useFetch from scratch | with check list, tests and examples

In this video CJ shows how to implement a useFetch react hook from scratch. He shows how to manage data and loading state. He also shows how to handle fetch errors, parse errors and request cancellations. He provides a test suite, checklist and examples so you can practice implementing this hook yourself.

00:00 intro
03:14 repo setup
03:30 example hook usage
04:46 repo walk-through
05:00 test setup
05:40 stubbed implementation
06:03 call fetch on mount
06:46 manage loading state
09:11 manage data state
10:41 handle options immediate
12:30 handle re-renders
16:09 handle empty url
17:41 handle fetch errors
19:12 handle json parse error
19:38 handle update calls
21:12 handle abort error
23:18 resetting state on load
24:30 handle multiple requests
28:53 cancel request on unmount
30:00 thanks!

Corrections:
19:29 The test "should handle http errors correctly" has been added to the repo since video release. See notes in src/use-fetch/README.md.

------------------------------------------------------------------------------

Hit us up on Socials!

#react #typescript #testing

[brynobryno]

I would appreciate video on testing itself ✌

[nickwoodward]

amazing idea for a video. learning how useState worked under the hood and implementing a basic version helped me understand stale values much better. looking forward to watching all of this

[zubeyranwar]

please cj, video on testing will be so helpful

[rodrigocornidez]

This was such a great video, thank you CJ! It was very insightful.

[nicogaspa]

Nice job! Thanks CJ for the great content as always 😊✌🏻

[ElNicopewpew]

Damn I learned so much, and it gave me a teeny bit anxiety regarding some of my old fetch functions.

[tnp]

Great video 🎉.
1. Please add tutorials for testing.
2. How to prefetch using this

[Web-Dev-Codi]

CJ, I love the colors of your font. What color hex values are you using?

[sparx_super]

Would using useReducer makes any differences here ?

[taquanminhlong]

I think making useAsyncState is more versatile than narrowing down to just fetching

[sparx_super]

Maybe implement cache as well for future video ? That would be interesting