Why use a Custom Hook for React Context API instead of useContext (+ TypeScript)
ฝัง
- เผยแพร่เมื่อ 16 มิ.ย. 2024
- 👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add authentication to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
⏱️ 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
My Professional React & Next.js course is OUT NOW now! Find it here: bytegrad.com/courses/professional-react-nextjs -- this is the #1 resource to master the latest React & Next.js, my absolute best work.
This is the first time I see the logic to make sense of this pattern. Well done.
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 🙏
I appreciate that!
Funny how people praise the default non-language specific convensions (DRY in case of this video)
Just goes to show how low the bar for becoming an SDE is nowadays
@@noobgam6331 Was this comment necessary? Lol. I don’t see your point. This is a genuinely useful refactor that not everyone might’ve considered, and it’s presented concisely with TypeScript and the latest version of Next 13. Don’t see how the ‘bar is low’ when this covers the ‘how’ of DRY instead of just the ‘what.’
Agree. So well done. No fluff, no 5 minutes of chatter, self-aggrandizing, blah…just right to the point. I’m looking forward to your React course even though I’m very experienced, because I know I’m going to learn some new things and not waste any of my time. Most teachers and dev content creators could learn from this guy!
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.
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.
I love that nowadays every Tutorial is in Typescript =) Thanks!
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.
EXCELLENT step-by-step teaching! Really well done.
Thanks for the great, concise, and useful content! Keep up with the great work!
Thanks, will do!
Great intro to good practices using context and custom hooks!
Nice that you focused on Typescript cleanup as well!
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!
the thought process and the flow of work is very clear and that makes these videos super satisfying to watch, thanks : )
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!
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.
yup very Few Videos are there related to Context in null
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!
Excellent video. I truly appreciate the additional ts debugging info you provided! Very valuable.
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 🙏
I consider this video as a source of truth for using best practice on implement context api . Thank you very much sir ❤
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
Thanks a lot for this. You have re-ignited my love for React
I mean, wow! I just found your channel and i already love it, thank you for sharing your knowledge, keep making videos like this please!
Thank you! Will do!
Excellent video, as always. The concise way you explain things, as well as the extra information and "gotchas" you always provide as you explain are top class.
Thanks a lot, appreciate it
Thank you for the great video, a lot of small things to help me up my rank from beginner to experienced beginner ^^ Was good to understand also the typescript union when used with useState!
I don't normally comment on videos, but this really helped me out. Great work, and thanks!
Thanks! Really clear explanation! Congratulations on such a good video
Thank you! This was incredibly helpful and explained very well. :)
I got hooked! thanks man!
Incredibly clear video. Thank you very much.
+10 for showing how to implement the typescript version thoroughly
Perfect explanation, Thanks !
i just learnt this from old project, really great way to use
You're doing an awesome job, byte !! Lots of love !!💗❤❤
Lucky to bump into this, had something similar I've been trying to fix, bless you❤️
Informative and concise, very good. Many thanks from Italy.
Thank you! Now I know why! I have been doing it this way, simply for convenience but was wondering whether this was actually the right way. Lucky punch I guess :P
I was actually googling to find the "official" way of doing it, just to make sure I wasn't doing anything stupid that could bite me later down the line.
Now I know what I had is indeed correct and why, and I understand the underlying logic. Plus I learnt a couple of handy tips along the way!
Awesome! Keep up the great work, I always enjoy following you through your insightful content!
Damn you are really good at explaining everything. Hope I get someone like you as my senior.
This lesson is very understandable and fun. Good Luck Teacher. Thank you✔✔
Thank you, very well explained and easy to grasp.
Nice and very informative. Can you speak louder
Thanks, will do
In TypeScript you can also wrap your interface/type within `PropsWithChildren` instead of manually specifying it in your type.
What a class, man. What a class!
Loved seeing how u debug typescript errors, learned a lot from that
Thanks a lot! Super easy to understand
You are the TypeScript man! Thanks
good explanation, thank you! everything is clear
Thank you, your videos are very informative and easy to understand, even for a non native or proficient english speaker like me
Great video. If you’re using next I highly recommend looking into the next-themes package if you want to make it stupid simple
Your voice is so calming! And the content is amazing. Subscribed
superuseful, thanks!
I think this year i'll get promoted from junior to mid, thanks to you.
I really like your videos, you keep them short, on point and informative about pretty up-to-date technologies.
What I'd like to add to this video is that many times you only need a hook without a context.
And in other places you need that same hook but with a context provider.
That issue is solvable by putting [theme, setTheme] logic into a custom hook, and by calling it inside ThemeContextProvider.
But even more frequently, you may need to call a hook, do something with its values, maybe pass them to another hook and then return context provider for the components down tree.
And on a different place in your project you need to call that same hook, and just return context provider, like in your example.
This logic binds hook and context together without flexibility, which is not ideal for complex projects.
It's much better practice to abstract away provider factory separately from hooks.
Thank you for the lesson I will be using this on my personal project.
Had a question out of scope, what options do we have if we wanted to toggle theme on the tag which is outside the provider?
I assume the options are to rely on JS or move the provider higher in the DOM wrapping the tag but the later would require making the layout a client component...
As a web dev, great content! Subscribed!
Great explanation! Nice job! 🙂
Thank you! 😃
thanks :) made my contexts a lot cleaner
A small tip there you could also extract the theme union type like this: ThemeContext[“theme”] instead of creating it separately but nothing wrong with your implementation but just a small trick I wanted to share hope that helps.
Looking forward to your React course!
It's very close. Make sure you're subscribed to the email newsletter :)
Nicely done, im learning typescript and get confused a lot with the types 😅. I've been using the useContext hook a lot in previous projects without typescript, changing to types and setting this up was no fun while learning. This is the best tutorial I could find on this topic explaining exactly how i would set it up minus types. I just wish to know how do you use a global context file to manage all your state using types, that could be messy in one file?
Good video, thanks for the clarification about client components that accept children. I was unsure if this works similarly to Astro, which appears to be the case and is the best case scenario.
Small suggestion for the types: React already has a React.WithChildren type which would be good enough here, no need for a type alias. This type is also generic so you can wrap it around any object type like React.WithChildren. I don't see this type used often as most of the time you're representing an HTML tag with ComponentProps instead, which already includes the children prop. ReactNode should only be used like this when a child element is absolutely required.
A great late discovery (for me).
Impressive channel and content.
Subbed!
Very useful and easy to catch the concept
at last someone is going deep into react and the TS solution part is OG
Amazing job! every interesting approach. Can you make more videos about fixing typescript issues like you did after 6:18 they are very awesome and I like the tips u're giving like the hover over setTheme for example! thank you!
Amazing!!
Was trying to solve null error while destrucuring react context , very useful video ❤
Just Learned typescript and type checking on a 9min video❤🔥💯
Thanks I learn a alot from this video
great video thank you :)
Glad I found your channel
Great !! btw brother wich extension is you are using for code suggestion.
crystal clear.
Thank you so much❤
that was an awesome explanation
amazing !
If you type and set up `ThemeContext` correctly, then `const { theme } = useContext(ThemeContext);` is all you need and it won't have any issues out of the box. Just do something like `const ThemeContext = createContext({ theme: DEFAULT_THEME, setTheme: () => throw Error('Not implemented'); })` and then no more null values or type problems
duuuuude!!!!!you got my sub!
great vid I had a question. if we wrap a server component inside a client component will the server component wait for the client that it's a child of to be hydrated before it loads?
Good stuff, thanks
great video!
Great content as always, thank you👏👏
👍 wonderful video
great explanation ❤
@5:21. Curious why `React.useContext` to `useContext` is a great co-pilot suggestion. I prefer more explicit style -- what's the con (other than needing to type more letters if multiple useContext references, which wasn't the case here)? Great video btw -- like your style (direct, nice pace). Thanks!
Copilot is an AI model based on some data set, most likely that's what alot of the repos used
Wow what a great tutorial. thank you for including the types part at the end aswell, really helpful! I just got a question, since you said it's better to use type instead of interface is there any use case for using interface or should you alwasy use type?
I put up a video some time ago about "Type vs Interface" in which I take the position to always use the type alias. So far I haven't seen good use cases for interface. Maybe there are some though, there are always edge cases.
I thinks in this case its better to use enum rather than type
great video
You don't have to create that hook. Instead of initial "null" value, I give it an initial value for both "theme" and "setTheme" and it works that simple.
I agree with you. Creating a hook just to escape null doesn’t make any sense to me.
I use this pattern btw but not because I want to escape null. I always create contexts with valid default values.
The more important part of the hook is throwing the error when devs try use it outside the required provider.
good video thanks
Smart... 👌
This content is gold. Thanks for sharing it. 🙌
Great!
really good
Great info. Which theme are you using in vscode?
This video is a great demonstration of why React overcomplicates things, often. This shouldn't be this much work...
I am still very new to typescript and next.js. Your videos keep surprising me with things I've never seen anyone else mention. I've been having lots of frustration trying to solve lots of little annoyances like trying to determine the theme being used.
Now if only you could tell me how to get the oklch color that Daisyui uses in its themes and convert them so chart.js can use them since they only use hex, rgb, or hsl.
None of the color converters that I've looked into seems to handle oklch.
My gosh, you just showed live the type hell I hate when it comes to typescript, and I suffered a lot because of that xD It's interesting to see someone solving all of those typescript complaints, and that easy?! I hope to be like you one day :']
Haha I was like this at some point too
One day you will realise hopefully :) Everyone goes to this stage at first.
I have some questions here :
-This implementation is to solve the issue of initialising the context with `null` (`createContext(null)) , but in (at least in this) situation, why not initialising the context with a `light` (or `dark`) value? We are supposed to pass to the create context function the initial value of our context. And our web/app , should have an initial theme mode (it should be either dark or light the moment it loads for the first time). This way there is no need to check for `null` value.
-Why is it annoying having to pass around variable `ThemeContext` , but not function `useThemContextProvider` ?
-If we try to use a context outside of the provider, we will have an error anyway, because the point of creating a context, is that only the components inside of the provider, have access to it. To me, is like trying to put an `useEffect` inside an If/else , React will throw an error remind us.
Don't get me wrong, I love your approach, and how clearly and simple you explain everything (that's why I am subscribed ;) ) , but if you are saying something as radical as that we shouldn't do it in the "regular" way, for us ( beginners or juniors,) it would be good to have a bit more of explanation about it.
Thanks for the video!
Would you prefer not extracting the type "dark" | "light" as a separate type Theme, and instead use ThemeContext["theme"] as theme's type?
Then, we can use ThemeContext["theme"] wherever Theme is used. However, your way seems cleaner.
Won't work as you need it for setTheme too.
@@QwDragon I actually tried it beforehand, and it works if you use the type itself inside its definition, and even what I wrote works: ThemeContext["theme"]. So, it turns out you can use another property to define some property's type.
Nice
thank you! will your React/Next.js course be coming out soon?
Thanks, it’s very close. Make sure you’re on the email list :)
Is the reason to set the initial value to null so you can check if its being used outside the provider? Or why not define it as an object?