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 🙏
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!
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.
Seriously, that last bit of of "house cleaning" was incredibly helpful for me. A perfect real-world workflow example, since I rarely have the luxury or foresight to fully define types before implementing the component.
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.
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 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.
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!
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
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!
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 🙏
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!
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.
Great video. If there is a natural fallback value for the context value, I tend to give createContext a default value (could be an object with light as theme value in this example) instead of the null, so the consumer gets a value regardless of being inside a provider or not. Depends on the use case of course.
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!
4:30 i don't think I agree to what you said here. It isn't null because the component could be outside the scope of the wrapper context but it is being inferrred as null because that's what is being passed during creation of the context. what you got is a compile time error. TS has no idea you passed a value(an object) rather than null down the line. So technically there is no js error. A type coersion can simply solve this. Correct me If I'm mistaken.
Agree, but this aproach also prevents the components that use the hook from being used in a way thay it shoulnt, a runtime exception is far better than a silent unintended behaviour
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?
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.
@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!
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 :']
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.
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...
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.
@@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.
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?
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.
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.
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.
4:04 at this point, isnt your Logo component already inside of the ThemeContextProvider? It was put into Main, I believe. I guess my confusion was the reasoning for the null being that it out was outside of the provider.
This is great! One thing, why does my linter show a warning but not an error with this for the createContext const: Fast refresh only works when a file only exports components. Move your React context(s) to a separate file.
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 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?
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.
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.
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.
Just when I got enough value from this video, you add in the TypeScript part at the end with explanations. Fantastic, man
Seriously, that last bit of of "house cleaning" was incredibly helpful for me. A perfect real-world workflow example, since I rarely have the luxury or foresight to fully define types before implementing the component.
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 love the way you explain/speak.
you speak fast without losing time
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 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.
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!
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!
I don't normally comment on videos, but this really helped me out. Great work, and thanks!
the thought process and the flow of work is very clear and that makes these videos super satisfying to watch, thanks : )
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
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!
Thanks! Very clear tutorial. I especially appreciate the last part of walking through type narrowing process a lot!
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 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!
Great intro to good practices using context and custom hooks!
Nice that you focused on Typescript cleanup as well!
EXCELLENT step-by-step teaching! Really well done.
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!
Your voice is so calming! And the content is amazing. Subscribed
You just showed me the answer to one of my problems of my project at job! Thanks!
Thanks a lot for this. You have re-ignited my love for React
I consider this video as a source of truth for using best practice on implement context api . Thank you very much sir ❤
Excellent video. I truly appreciate the additional ts debugging info you provided! Very valuable.
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
In TypeScript you can also wrap your interface/type within `PropsWithChildren` instead of manually specifying it in your type.
Great video. If there is a natural fallback value for the context value, I tend to give createContext a default value (could be an object with light as theme value in this example) instead of the null, so the consumer gets a value regardless of being inside a provider or not. Depends on the use case of course.
I think this year i'll get promoted from junior to mid, thanks to you.
+10 for showing how to implement the typescript version thoroughly
Really straight forward. Very usefull. Thanks as usual!
Thanks for the great, concise, and useful content! Keep up with the great work!
Thanks, will do!
You're doing an awesome job, byte !! Lots of love !!💗❤❤
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!
Nice and very informative. Can you speak louder
Thanks, will do
As a web dev, great content! Subscribed!
Loved seeing how u debug typescript errors, learned a lot from that
Informative and concise, very good. Many thanks from Italy.
4:30 i don't think I agree to what you said here. It isn't null because the component could be outside the scope of the wrapper context but it is being inferrred as null because that's what is being passed during creation of the context. what you got is a compile time error. TS has no idea you passed a value(an object) rather than null down the line. So technically there is no js error. A type coersion can simply solve this. Correct me If I'm mistaken.
Agree, but this aproach also prevents the components that use the hook from being used in a way thay it shoulnt, a runtime exception is far better than a silent unintended behaviour
i just learnt this from old project, really great way to use
Thank you, your videos are very informative and easy to understand, even for a non native or proficient english speaker like me
Damn you are really good at explaining everything. Hope I get someone like you as my senior.
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?
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.
Thanks! Really clear explanation! Congratulations on such a good video
This lesson is very understandable and fun. Good Luck Teacher. Thank you✔✔
You are the TypeScript man! Thanks
What a class, man. What a class!
Looking forward to your React course!
It's very close. Make sure you're subscribed to the email newsletter :)
@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
A great late discovery (for me).
Impressive channel and content.
Subbed!
at last someone is going deep into react and the TS solution part is OG
Thank you! This was incredibly helpful and explained very well. :)
Incredibly clear video. Thank you very much.
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 got hooked! thanks man!
I love that nowadays every Tutorial is in Typescript =) Thanks!
Great info. Which theme are you using in vscode?
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
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...
Great video. If you’re using next I highly recommend looking into the next-themes package if you want to make it stupid simple
Thank you, very well explained and easy to grasp.
Lucky to bump into this, had something similar I've been trying to fix, bless you❤️
thanks :) made my contexts a lot cleaner
Very useful and easy to catch the concept
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.
Perfect explanation, Thanks !
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?
Thanks a lot! Super easy to understand
duuuuude!!!!!you got my sub!
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.
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.
good explanation, thank you! everything is clear
This great. Thanks for the video
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 :)
Glad I found your channel
great explanation ❤
Was trying to solve null error while destrucuring react context , very useful video ❤
Great !! btw brother wich extension is you are using for code suggestion.
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.
Just Learned typescript and type checking on a 9min video❤🔥💯
superuseful, thanks!
this is a gem
that was an awesome explanation
4:04 at this point, isnt your Logo component already inside of the ThemeContextProvider? It was put into Main, I believe. I guess my confusion was the reasoning for the null being that it out was outside of the provider.
This is great! One thing, why does my linter show a warning but not an error with this for the createContext const:
Fast refresh only works when a file only exports components. Move your React context(s) to a separate file.
This video is a great demonstration of why React overcomplicates things, often. This shouldn't be this much work...
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))
great video thank you :)
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?
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.
Thank you so much❤
This content is gold. Thanks for sharing it. 🙌
Thanks I learn a alot from this video
Amazing!!
crystal clear.
👍 wonderful video
Great explanation! Nice job! 🙂
Thank you! 😃