Always Use a Custom Hook for Context API, Not useContext (React Context API, TypeScript)
HTML-код
- Опубликовано: 14 май 2024
- Hi, I'm Wesley. I'm a brand ambassador for Kinde.
👉 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.
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!
This is the first time I see the logic to make sense of this pattern. Well done.
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.
EXCELLENT step-by-step teaching! Really well done.
the thought process and the flow of work is very clear and that makes these videos super satisfying to watch, 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.
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.
Great intro to good practices using context and custom hooks!
Nice that you focused on Typescript cleanup as well!
I love that nowadays every Tutorial is in Typescript =) Thanks!
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!
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
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!
Thanks a lot for this. You have re-ignited my love for React
I don't normally comment on videos, but this really helped me out. Great work, and thanks!
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 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.
You're doing an awesome job, byte !! Lots of love !!💗❤❤
Thanks for the great, concise, and useful content! Keep up with the great work!
Thanks, will do!
Informative and concise, very good. Many thanks from Italy.
Thank you! This was incredibly helpful and explained very well. :)
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...
I consider this video as a source of truth for using best practice on implement context api . Thank you very much sir ❤
Thank you, very well explained and easy to grasp.
+10 for showing how to implement the typescript version thoroughly
Your voice is so calming! And the content is amazing. Subscribed
i just learnt this from old project, really great way to use
Thanks! Really clear explanation! Congratulations on such a good video
Incredibly clear video. Thank you very much.
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
This lesson is very understandable and fun. Good Luck Teacher. Thank you✔✔
Loved seeing how u debug typescript errors, learned a lot from that
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!
Perfect explanation, Thanks !
I got hooked! thanks man!
Thanks a lot! Super easy to understand
Thank you, your videos are very informative and easy to understand, even for a non native or proficient english speaker like me
As a web dev, great content! Subscribed!
Damn you are really good at explaining everything. Hope I get someone like you as my senior.
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.
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!
You are the TypeScript man! Thanks
Lucky to bump into this, had something similar I've been trying to fix, bless you❤️
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!
superuseful, thanks!
Great video. If you’re using next I highly recommend looking into the next-themes package if you want to make it stupid simple
thanks :) made my contexts a lot cleaner
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?
What a class, man. What a class!
Very useful and easy to catch the concept
In TypeScript you can also wrap your interface/type within `PropsWithChildren` instead of manually specifying it in your type.
A great late discovery (for me).
Impressive channel and content.
Subbed!
Glad I found your channel
Thank you so much❤
great explanation ❤
Great !! btw brother wich extension is you are using for code suggestion.
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
I think this year i'll get promoted from junior to mid, thanks to you.
at last someone is going deep into react and the TS solution part is OG
duuuuude!!!!!you got my sub!
Was trying to solve null error while destrucuring react context , very useful video ❤
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?
Great explanation! Nice job! 🙂
Thank you! 😃
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!
crystal clear.
amazing !
Nice and very informative. Can you speak louder
Thanks, will do
when using multiple value from context and de structure in component , some values are need to destructure without actual needs. So I have to add types theme?:string in context types . How can I fix that ?
great video!
that was an awesome explanation
Good stuff, thanks
great video thank you :)
Amazing!!
Thanks I learn a alot from this video
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.
Looking forward to your React course!
It's very close. Make sure you're subscribed to the email newsletter :)
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.
good video thanks
Thank you for your video, verry helpful but I have a question:
I got an issue with your code, if the type of context is ThemeContext or null then if we have a line of code like below:
const {theme}= useThemeContext() it will have error that the value return can be null so that can not get theme value from that, and I dont want that. Can I just set the type of context is just ThemeContext and dont have null, then we need to set default value for this type, is this ok?
Just Learned typescript and type checking on a 9min video❤🔥💯
Great!
Hi! Is there a possibility to use custom hook to get context in server components?
Great info. Which theme are you using in vscode?
👍 wonderful video
Smart... 👌
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?
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
great video
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.
I think not memoize the Ctx Provider Value could be a problem, do you?
really good
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
I am not sure if you can just straight up export the state and the setstate variable in just one useContext() function.
You are returning only context in the function, then how come when you export the function, you equate it to {state, setstate} = useStateFunction(), when your useStateFunction is returning only 1 variable and that is the context (here the required context is state))
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 :)
amazing
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.
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.
Great content as always, thank you👏👏
could've also added a custom error boundary in case the consoomer component was not wrapped in a Provider