Why use a Custom Hook for React Context API instead of useContext (+ TypeScript)

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).

👉 Discord: all my courses have a private Discord where I actively participate

⏱️ Timestamps:
0:00 Intro
0:07 Context example
1:04 Wrap app with context
1:42 Client component
2:13 Consuming context (useContext)
3:09 First problem
3:20 Second problem
4:18 Check for null
4:47 Custom hook
5:45 Consume context
6:18 Context API TypeScript typing
6:27 Component props type
6:37 Context type
7:51 'Light' | 'Dark' type
8:34 Theme type
8:48 Type alias vs Interface
9:03 setTheme type

#webdevelopment #programming #coding

[revillsimon]

What I like about your videos is how you cover a lot of up-to-date info and techniques very quickly, thoroughly, and it is very concise and to-the-point. Thank you 🙏

[keifer]

Just when I got enough value from this video, you add in the TypeScript part at the end with explanations. Fantastic, man

[youneshenni]

This is the first time I see the logic to make sense of this pattern. Well done.

[krsnamara]

Really really great video here. I am learning typescript, useContext and next.js right now. Spent the past few days trying to sift through the different resources. This video here really dug into the details of some of the issues I was running into. Thank you much for taking the time and sharing the knowledge with clarity.

[shreyasvaidya]

I work with Context a lot and learnt something new and its very useful. I will be using it a lot. Thank you sir. Keep up the great work.

[nguy]

EXCELLENT step-by-step teaching! Really well done.

[JoeyMa]

I love this! It sounds like you would be the type of person who would take the time to understand something fully (or decently well), and it shows from the way you explain your thoughts! If I may, I would also love to hear your take on named imports over ‘import React from “react”’. Based on my previous research the production code should properly tree-shake the unnecessary code to reduce bundle size, (when you’ve properly configured your webpack or if you’re using some framework like Next.js); however, having generous imports eventually slows the dev experience such as during ‘npm run dev‘ or ‘npm run build’. Or even a video or references on this would be cool!

[laputafelix]

omg, those step-step-step typescript trouble shooting DOES help me getting out of the type-hell I’ve been to recently.
So far the best tutor in the context of typescript/nextjs combined.

[rayaqin]

the thought process and the flow of work is very clear and that makes these videos super satisfying to watch, thanks : )

[maykefernandesdossantos]

Great intro to good practices using context and custom hooks!
Nice that you focused on Typescript cleanup as well!

[martapfahl]

I love that nowadays every Tutorial is in Typescript =) Thanks!

[njahncke]

Excellent video. I truly appreciate the additional ts debugging info you provided! Very valuable.

[VLADICAKG]

Thanks for the great, concise, and useful content! Keep up with the great work!

[lillenk]

Holy S**T I'm happy I found you. So educational. After watching so many other videos were people explain things I just find myself still not really getting it. But this made me get it. This is gold!

[LeonardoJaquesDev]

This content helped me a lot. The code just got cleaner and smarter. I will follow you for more precious infamations like this. Thank you, keep up the good work

[UmeshKumar-mtdp]

You're doing an awesome job, byte !! Lots of love !!💗❤❤

[flameofheartsflameofhearts]

Thank you man, I was having some problems while making a darkmode in react, cuz I am kinda new to all these context and custom hooks, but after watching ur video I got it all done fast 🙏

[Xe]

I really enjoyed this video! Even the scary Typescript part was easy to understand. The only feedback I'd like to share is that the steps in working with React Context could have been emphasized more (it's so easy to miss if you don't pay close attention). Since Context is hard for beginners to grasp, perhaps talking about the 3 step process of Create, Provide, and Consume (CPC) before diving into the code would have helped. Also, showing the 3 steps as a text overlay in your video would've been a nice bonus! You did a great job of describing why you would even need context (for theming) and I also learned some new things today. Thank you!

[ekanemeno]

Thanks a lot for this. You have re-ignited my love for React

[zackarybrumfield]

This is the first video I've watched that focused on error handling as in depth as you have. I've watched several useContext videos over the years and I can't really recall someone who focused on the the idea that your context will be null. Or maybe I just haven't searched hard enough lol. This gave me a better idea on how to handle context errors in my app.