hey i’ve been following for a while now and this is solid. no gimmicks. pure education, learning and excellent content primarily focused in TS and JS +frameworks. would love to see Rust and wasam content integrated with js. excellent work. can’t wait to see your channel blow up beyond 100k.
Love how you Made the comparison between Context and Zustand. I always use Context and didn’t see why I should consider other state management tools. Thank you Jack
I don't understand why youtube didn't recommend your channel to me earlier. This video is not only about mastering React context but also the way you refactor/repurpose the components for the use of context and other state managers. Thanks so much because I learn a lot from it.
Incredibly clear and helpful demo. Please keep doing what you're doing. Your channel is by far the best I've found at showing both "the how" and "the why" of very specific and practical React + TypeScript in a very accessible way.
I always asked why people use redux for everything, while they could achieve the same with context or simpler state management libs. This video is proof of it. Unfortunately using context takes a lot of care to avoid re-renders, but zustand demonstrate it can look simple and do the job.
It's really neat how you go building the example structure till you get on the topic of the video instead of already showing everything done and and explaining. I really liked that :D
Mastering with the MASTER 🔥Every video is great, sometimes too much 😄, I mean I have seen the video even twice because you reach a high level, but with you Jack, I can improve my skills. Thanks ✌🏻
WOW! I mean really WOW... You are such a GREAT teacher. Teaching with examples and passing down all that precious knowledge with such an ease. Brilliant. I'm a fan. First video I watch on your channel and I'm subbed forever. I just started learning React 2 months ago and this helps a looootttttt. Thank you sooooo much man. I'll keep coming back for more knowledge as I need to get a job very soon, hopefully.
So much great things covered in this video. Also a shout-out for passing the set state as a prop and using the callback to get the state value. I never thought of that before!
I am pretty impressed with how easy and clearly he manages to explain these concepts... Zustand sounds pretty interesting, I am definitely gonna try it.
The comparison is really good, especially with the profiler. Didn't know that context will make those many changes to the tree. Thank you Jack for the awesome video!
Amazing content, I have been following the channel for a while now. As a Junior dev I can say that this channel motivates me to dive deeper into concepts and try them out on my own in a series of little projects. Keep up the good work and high quality content, Jack!
You did it again. I'm a developer for decades now and to be honest, I'm getting very annoyed by all those wanna be's out there. I'm trying to level up my knowledge about react (although I hate it) and every ninja is telling you to use context for global state. My guts feeling told me that is not a good idea. I don't want to rerender everything to update some fields. I even think that prop drilling is better. I follow your channel for a long time now and I'm glad you gave me the answers I was looking for. In a decent and professional way with proper knowledge and terminology. Thank you!
This is a really really awesome video. Way Way better than all those tutorial style videos which only is a regurgitation of documentation. This actually deepens my understanding and give me ability to judge new state management tools for myself
Hey Jack! Thanks for creating these kinds of content 🙏 I am in this stage of my career where I was positioned to coach jr developers and TBH as usual, impostor syndrome kicks in 😅 Hence, I know I need to put the work to shake off that and learning your contents helps me to have that confidence that I know I will be able to help them grow. I really appreciate it and I will pay forward the learning that I am getting from your contents 🙏
I used to use Redux (Redux toolkit to be precise) and it's still used for one of my active projects but in my latest project where I created my own CMS from scratch I used purely React Context for local state management and it was a very good experience. It's not like I dislike Redux toolkit (which is a pretty big upgrade on regular Redux imo when it comes to dev experience), but it was really nice to not have to put in a ton of dev time for the project on just state management.
one reason I favour the state managers over the context api is that you can access your state even outside your react components and sometimes thats a requirement. not sure if you can do something like. import contextApi from 'mycontextapi'; contextApi.value ... etc.
You are correct. Making the data in the context available externally would be something you would have to implement. But there is `useSyncExternalStore` that you might want to look into. It's designed specifically to connect React components to external state managers. So if something off the shelf doesn't fit your needs there is that.
Does use-context-selector support multiple contexts? I really like Zustand but then I realised it did not really fit in one of the projects I was working on as it didn't support multiple contexts, which was required for that project, unlike the context provider (please correct me if I am wrong) 🤕🤕
Thank you for the wonderful video, Jack! I work in this industry for 5 years and yet I found all of your videos amazing and incredibly informative! All your videos are precious gems :) Only one thing I found a little bit hard to follow is the pace you go through your code in the editor. Personally, for me is a little bit hard to follow with that speed. May be for others is okay :) Thank you once again for the cool stuff you're showing to our fellow programmers :)
Jack, you are so amazing. I would be so happy if you can create full stack web development course. I am sure many people (including me) are willing to pay for your course.
Hey Jack I have been watching video after video of yours. I am still in my deep dive of React and MFE's so would be curious if you had a video on managing State / Context via Module Federation, specifically around JWTs and how to control flow in MFEs for valid / invalid sessions. I'll keep looking through your library but this video along with every video you make is so informative. Thanks for publishing such amazing content!!
Thanks Jack great content . Btw is there a solution in zustand for creating state slices and naming them so when project gets bigger we can inspect them by redux toolkit with the slice names ? ( i can combine at store but they are spreaded in toolkit).Thank you..
Should your store.ts hold functions to make api requests? e.g a refreshData function might need to fetch data from an api and save it to state? can this be done in a single function e.g a useRefreshData hook? Struggling to understand what are the limits of this store AND looking for examples/information around using state manager and facade layer. if you have any
I have kind of learned HTML a thousand times over the years and skipped it because JS and CSS where so cool but HTML is so basic it is thought only to beginners I think you are the perfect person to teach us (i.e. We already know * "Hypertext" refers to links that connect web pages to one another, either within a single website or between websites*) you must do an HTML tutorial for people who knows the basics and give us the advanced tools to master HTML in the context of React and with the minimal CSS or styling possible for it to be interesting but focusing only on HTML (in the context of React probably)… 😅😅😅😅 I would love to get my HTML certification 😉😌😜
Let me just say what no one else notices… your video lighting and green screen setup is superb! 🙌 As a video guy I know this takes a bit of a setup/tweaking to get such a clean key without green spill around you.
I am getting the error "RangeError: Maximum call stack size exceeded" and it is pointing at the "useStore" custom hook. This happens when I start using Context and context-selector. 25:38 Replacing Zustand With Context 29:37 When Context Updates Components 30:10 Context Using use-context-selector
Another great video….it’s amazing how many little things I learn mixed in with the major topic stuff. Thank you! Also, you are a great salesman for Copilot…the more I watch you write code the more I want it!
Love this channel!!!!!!!!!!! My go-to for React/JS stuff cause it covers more than just the basics which is what is needed in the real world env. Thx for the vids Jack!
hi Sir, Can you please help to use Profiler. I have got the extension in the browser, but am unable to see a view like yours, where components are highlighted.
I use ScreenFlow to capture the screen. If I drew on the screen then I was using ScreenBrush and a commodity Gaomon drawing tablet. And then for post production I use the Adobe Suite. Honestly through, in most cases you could get by the just using ScreeFlow and a decent microphone.
Finally I got the answer of this famous question, what is difference between redux and context. Your channel was always the best. I guess every body can find their question's answer in your channel. good to have you jack🤩
While I'm kind of already familiar with this concept, I still learn some new stuff here and there when you explained it. Thanks! By the way, what extension do you use for that autocomplete?
thanks for the ecommerce example, adding it to the project section in my resume. A full fledged ecommerce app with login logout and add to cart functionality 😎
Hi Jack, thanks for the great video, I've learned a ton. I have never heard of Zustand before and it seems very interesting for my future projects. Would you use it instead of redux?
what about jotai + valtio. I think we are moving toward an atom based state managers, and the proxy pattern reduces the boilerplate of writing selectors
Great Video - Thank you! Would it be ok to use a context provider for more global states (e.g. Dark/Light - Mode) and prop drilling for small stuff inside of components? Or should you choose one system and stick to it?
Since setting state in the client component function body, also gets run on the server side, the app consumes a lot of server memory when I have a lot of stores. 😥
Let's say I have multiple pages each with their own login and cart count. Can I create separate stores using a state manger for each page? Or is state strictly global in a state manager like Zustand? Thank you so much for these videos. Definitely the best out there!
I prefer to keep my state as localized as possible. So, yeah, if I were using Zustand I would have one Zustand store per page that needed it. And then maybe a central store for user identity and the JWT.
I HAVE A QUESTION, is there anything useContext can do that state managers cannot do? Because if state managers like Zustand can do everything that useContext can do, I feel like Zustand would be much easier to implement and use.
The context as store thing blur the business logic line. So you can do stuff in that realm that you can't do in the isolated realm. For example you could have a store/context/hook combination that would track the screen with and return the current breakpoint.
Hi Jack, my question is on counter-ctx-use-state.js (9.15) you didn't give values to the provider. How react knows that setCounter is for counter? I was expecting you are gonna assign the " const [counter,setCounter]=useState(0) " in CounterUseState and then give that values to like this.
Excellent video! What are your thoughts on using useReducer with useContext? Are there too many potential pitfalls with that approach vs a state management library?
By the way, I just bought your No BS TS book and it is excellent! Thank you for all the hard work and passion you put into your videos and writing. You are an excellent teacher. Please keep up the good work!
I think the pitfalls around the hooks approach is that a lot of folks jumped over hooks and right into state managers, so their hooks skills are rough, and there can be some onboarding time to bring them up to speed.
The one biggest sticking point to going to TS from here is the typing of the context. And probably to avoid having to do some non-null initial state there would be some bang operators in the selectors to state that we are guaranteed a context. In these simple examples we are guaranteed a context. But in a library context you'd want to have the selectors check for the context and either return a default value or throw.
honestly this channel is probably the best out there for deep dives into Typescript and React, love your content good sir
Agree
hey i’ve been following for a while now and this is solid. no gimmicks. pure education, learning and excellent content primarily focused in TS and JS +frameworks. would love to see Rust and wasam content integrated with js. excellent work. can’t wait to see your channel blow up beyond 100k.
Great team advice too, even you know the libraries already, "What is easier to review?" is a helpful perspective.
I was 2 videos and decide to subscribe. This channel got the real stuff compared to so many other TH-camrs pretending to be professional developers.
True, this channel deserves to be much bigger - lots of knowledge and very good production quality.
Love how you Made the comparison between Context and Zustand.
I always use Context and didn’t see why I should consider other state management tools.
Thank you Jack
I don't understand why youtube didn't recommend your channel to me earlier. This video is not only about mastering React context but also the way you refactor/repurpose the components for the use of context and other state managers. Thanks so much because I learn a lot from it.
Never really understood what context and Redux do, and you explain it so well with clear examples. Thank you!
Incredibly clear and helpful demo. Please keep doing what you're doing. Your channel is by far the best I've found at showing both "the how" and "the why" of very specific and practical React + TypeScript in a very accessible way.
adding this facade layer is genious
I always asked why people use redux for everything, while they could achieve the same with context or simpler state management libs. This video is proof of it. Unfortunately using context takes a lot of care to avoid re-renders, but zustand demonstrate it can look simple and do the job.
Just remember to make sure you use selectors with your zustand hook. :)
It's really neat how you go building the example structure till you get on the topic of the video instead of already showing everything done and and explaining. I really liked that :D
I think this video changed my life. Well, my frontend architecture but same thing right now.
Mastering with the MASTER 🔥Every video is great, sometimes too much 😄, I mean I have seen the video even twice because you reach a high level, but with you Jack, I can improve my skills. Thanks ✌🏻
WOW! I mean really WOW... You are such a GREAT teacher. Teaching with examples and passing down all that precious knowledge with such an ease. Brilliant. I'm a fan. First video I watch on your channel and I'm subbed forever.
I just started learning React 2 months ago and this helps a looootttttt.
Thank you sooooo much man.
I'll keep coming back for more knowledge as I need to get a job very soon, hopefully.
So much great things covered in this video. Also a shout-out for passing the set state as a prop and using the callback to get the state value. I never thought of that before!
I am pretty impressed with how easy and clearly he manages to explain these concepts... Zustand sounds pretty interesting, I am definitely gonna try it.
Exactly what I needed, still getting familiar with React and Next JS. Thanks!
There is a ton to digest here. Will be watching this many times. Thanks Jack!
Just when wet thought we don't deserve this a high quality educative content, you showed up and said we deserve it.
I just start career in React js and found the great video that is helpful for me
Thank you, Jack, You have the best Front-end channel on YT. Keep it up.
This is a high quality video with great content, something really refreshing on TH-cam! Thank you very much 🙏
Thank you for this episode. In my personal ranking this is the best Context explanation I've ever seen
Thanks! This was really helpful, even though I probably need to rewatch and read the docs a couple of times still
In the dark and dangerous world of React over complexity you are beacon of understanding and hope
The comparison is really good, especially with the profiler. Didn't know that context will make those many changes to the tree. Thank you Jack for the awesome video!
These series of mastering are amazing, Thank you very much man, I have learned lots of things from you and I owe you a lot :)
Insanely good video. Perfect level of detail and nice comparison between the different options. I learned a lot from this.
Amazing content, I have been following the channel for a while now. As a Junior dev I can say that this channel motivates me to dive deeper into concepts and try them out on my own in a series of little projects.
Keep up the good work and high quality content, Jack!
You did it again. I'm a developer for decades now and to be honest, I'm getting very annoyed by all those wanna be's out there.
I'm trying to level up my knowledge about react (although I hate it) and every ninja is telling you to use context for global state. My guts feeling told me that is not a good idea. I don't want to rerender everything to update some fields. I even think that prop drilling is better.
I follow your channel for a long time now and I'm glad you gave me the answers I was looking for. In a decent and professional way with proper knowledge and terminology. Thank you!
This is a really really awesome video. Way Way better than all those tutorial style videos which only is a regurgitation of documentation. This actually deepens my understanding and give me ability to judge new state management tools for myself
Amazing video Jack, I really enjoy watching the way you write and talk about code. Your channel is absolutely phenomenal.
Bzw it's "Zustand" (German "state") with hard Z like the S in "state", "sort", "set"...
Even some of the paid content out there is not as impressive as your content sir. Thank you so much.
Wow. Fantastic tutorial. Your teaching is very clear. Super helpful. Thanks!
Hey Jack! Thanks for creating these kinds of content 🙏 I am in this stage of my career where I was positioned to coach jr developers and TBH as usual, impostor syndrome kicks in 😅
Hence, I know I need to put the work to shake off that and learning your contents helps me to have that confidence that I know I will be able to help them grow.
I really appreciate it and I will pay forward the learning that I am getting from your contents 🙏
You really know your stuff. This is where I strive to be in the future
Fantastic comprehensive overview! Love your videos Jack, been following you for a long time now.
I used to use Redux (Redux toolkit to be precise) and it's still used for one of my active projects but in my latest project where I created my own CMS from scratch I used purely React Context for local state management and it was a very good experience. It's not like I dislike Redux toolkit (which is a pretty big upgrade on regular Redux imo when it comes to dev experience), but it was really nice to not have to put in a ton of dev time for the project on just state management.
Terrific video, and very topical for my team at the moment as it would happen. Thank you as always ☘
Best in depth explanation and for free woow you are amazing .. Thank you
one reason I favour the state managers over the context api is that you can access your state even outside your react components and sometimes thats a requirement. not sure if you can do something like.
import contextApi from 'mycontextapi';
contextApi.value ... etc.
You are correct. Making the data in the context available externally would be something you would have to implement. But there is `useSyncExternalStore` that you might want to look into. It's designed specifically to connect React components to external state managers. So if something off the shelf doesn't fit your needs there is that.
You just dont stop at a superficial layer. Thanks a ton!!!!
Bruh this channel is a blessing
Does use-context-selector support multiple contexts? I really like Zustand but then I realised it did not really fit in one of the projects I was working on as it didn't support multiple contexts, which was required for that project, unlike the context provider (please correct me if I am wrong) 🤕🤕
Use context selector is a plug-n-play exchange for createContext, so, yes.
Thank you for the wonderful video, Jack!
I work in this industry for 5 years and yet I found all of your videos amazing and incredibly informative! All your videos are precious gems :)
Only one thing I found a little bit hard to follow is the pace you go through your code in the editor. Personally, for me is a little bit hard to follow with that speed. May be for others is okay :)
Thank you once again for the cool stuff you're showing to our fellow programmers :)
Jack, you are so amazing. I would be so happy if you can create full stack web development course. I am sure many people (including me) are willing to pay for your course.
Hey Jack I have been watching video after video of yours. I am still in my deep dive of React and MFE's so would be curious if you had a video on managing State / Context via Module Federation, specifically around JWTs and how to control flow in MFEs for valid / invalid sessions. I'll keep looking through your library but this video along with every video you make is so informative. Thanks for publishing such amazing content!!
VERY GOOD explanation, thank you!
Thank you so much for this great tutorial!
Wowww 👏 this is the most thorough explanation on state management I've come across on yt. Definitely sub to this channel. Thanks!
Thanks Jack great content . Btw is there a solution in zustand for creating state slices and naming them so when project gets bigger we can inspect them by redux toolkit with the slice names ? ( i can combine at store but they are spreaded in toolkit).Thank you..
You make multiple stores. I think that's the basic idea. One store per, what you would categorize as a "slice".
Watched 2 of your videos.
great content, very informative and very well edited.
Thanks a lot for the effort
Should your store.ts hold functions to make api requests? e.g a refreshData function might need to fetch data from an api and save it to state? can this be done in a single function e.g a useRefreshData hook?
Struggling to understand what are the limits of this store
AND looking for examples/information around using state manager and facade layer. if you have any
A "store" is just a separation of concerns between UI and the business logic. It's limits are whatever you want in terms of architecture.
I have kind of learned HTML a thousand times over the years and skipped it because JS and CSS where so cool but HTML is so basic it is thought only to beginners I think you are the perfect person to teach us (i.e. We already know * "Hypertext" refers to links that connect web pages to one another, either within a single website or between websites*) you must do an HTML tutorial for people who knows the basics and give us the advanced tools to master HTML in the context of React and with the minimal CSS or styling possible for it to be interesting but focusing only on HTML (in the context of React probably)… 😅😅😅😅 I would love to get my HTML certification 😉😌😜
Let me just say what no one else notices… your video lighting and green screen setup is superb! 🙌 As a video guy I know this takes a bit of a setup/tweaking to get such a clean key without green spill around you.
Thanks. I've been working on it and improving it over time. I think the most recent videos have been pretty solid.
I am getting the error "RangeError: Maximum call stack size exceeded" and it is pointing at the "useStore" custom hook. This happens when I start using Context and context-selector.
25:38 Replacing Zustand With Context
29:37 When Context Updates Components
30:10 Context Using use-context-selector
What's funny to me is that I see this video after seeing the newer "Do you NEED context?" videos :D
excuse me does your editor have cursive letters in it? Absolute madman
Another great video….it’s amazing how many little things I learn mixed in with the major topic stuff. Thank you!
Also, you are a great salesman for Copilot…the more I watch you write code the more I want it!
Great content and easy to understand. Thank you so much
Love this channel!!!!!!!!!!!
My go-to for React/JS stuff cause it covers more than just the basics which is what is needed in the real world env.
Thx for the vids Jack!
PS. these days i'm using Apollo Cache/Reactive variables to pass state around instead of React Context but React context is great too.
Thank you so much for this video. Really useful.
Thank You! Briliant as always.
Thank you for great video. What is the name of the extension that shows inline debug info in your vscode?
GitHub Copilot.
what was the tool you used which shows a green border around when dom update takes place?
React dev-tools
An awesome resource for understanding state management in React!
hi Sir, Can you please help to use Profiler. I have got the extension in the browser, but am unable to see a view like yours, where components are highlighted.
The University of React State is back in session! Thanks Jack. I will want to get Mr. Kato's book.
This is really really GREAT content Jack, thank you!
Always amazing content that’s prepared so well.
Curious, what tools you use to make your videos?
Would love to dem to my team in the same format
I use ScreenFlow to capture the screen. If I drew on the screen then I was using ScreenBrush and a commodity Gaomon drawing tablet. And then for post production I use the Adobe Suite. Honestly through, in most cases you could get by the just using ScreeFlow and a decent microphone.
It says Error: CounterContext is undefined? This happens after I move components to to there own files.
You should jump on the Discord server and ask your question there.
@@jherr I posted the question there, thanks Jack!
Finally I got the answer of this famous question, what is difference between redux and context. Your channel was always the best. I guess every body can find their question's answer in your channel. good to have you jack🤩
Hey Jack, great explanation as always! Just curious to know that when you used use-context-selector, why did the wrapper re-render?
Great content as always. Thank you Jack!
While I'm kind of already familiar with this concept, I still learn some new stuff here and there when you explained it. Thanks!
By the way, what extension do you use for that autocomplete?
GitHub Copilot.
@@jherr Oh, I see. Thank you!
easy peasy lemon squeezy, thats the master said.
Another very informative contents, so excited to watch your videos 🔥🔥🔥
Great video, I’ve learnt a lot from your youtube channel, keep up the great work.
Greeting from Morocco.
Thank you for the video! Where I can get same syntax highlighting?
thanks for the ecommerce example, adding it to the project section in my resume. A full fledged ecommerce app with login logout and add to cart functionality 😎
Hi Jack, thanks for the great video, I've learned a ton.
I have never heard of Zustand before and it seems very interesting for my future projects.
Would you use it instead of redux?
Great video, Zustand looks very promising
Amazing video Jack, thanks for the effort
what about jotai + valtio. I think we are moving toward an atom based state managers, and the proxy pattern reduces the boilerplate of writing selectors
Those are great. I just picked Zustand because it was easy and familiar. But those are awesome as well. I love atomic state management.
Great Video - Thank you! Would it be ok to use a context provider for more global states (e.g. Dark/Light - Mode) and prop drilling for small stuff inside of components? Or should you choose one system and stick to it?
A combination of context and props is totally fine. No need to try and fit every peg into the square hole.
Your office environment is amazing.
What intellisense extension you are using ? It seems very powerfull.
GitHub Copilot
Thanks Jack for great explanation. can you please share your vscode extensions
Here is my full setup: gist.github.com/jherr/cb8770e2ae92a7646d22c126be896a72
Can we have this project with the comparable examples to download from Git? I would love to be able to refer back to them side by side in vscode.
How would type and set a default value for the context with useState using typescript?
I usually create an `initialValue` object and then set the type of the context to be `typeof initialValue`.
Awesome video thank you so much!
Since setting state in the client component function body, also gets run on the server side, the app consumes a lot of server memory when I have a lot of stores. 😥
Let's say I have multiple pages each with their own login and cart count. Can I create separate stores using a state manger for each page? Or is state strictly global in a state manager like Zustand? Thank you so much for these videos. Definitely the best out there!
I prefer to keep my state as localized as possible. So, yeah, if I were using Zustand I would have one Zustand store per page that needed it. And then maybe a central store for user identity and the JWT.
I HAVE A QUESTION, is there anything useContext can do that state managers cannot do? Because if state managers like Zustand can do everything that useContext can do, I feel like Zustand would be much easier to implement and use.
The context as store thing blur the business logic line. So you can do stuff in that realm that you can't do in the isolated realm. For example you could have a store/context/hook combination that would track the screen with and return the current breakpoint.
Great content sir! Do you have a video comparing Zustand and Redux Toolkit?
Hi Jack, my question is on counter-ctx-use-state.js (9.15) you didn't give values to the provider. How react knows that setCounter is for counter? I was expecting you are gonna assign the " const [counter,setCounter]=useState(0) " in CounterUseState and then give that values to like this.
Usestate exposés those two values so passing Usestate as the values is the same as passing the state and the setter
Thank you so mush Jack!
LOVING THIS MASTR SERIES 🖤
This is such a rich content. Thanks for this Jack 👏🏽👏🏽👏🏽
Excellent video! What are your thoughts on using useReducer with useContext? Are there too many potential pitfalls with that approach vs a state management library?
By the way, I just bought your No BS TS book and it is excellent! Thank you for all the hard work and passion you put into your videos and writing. You are an excellent teacher. Please keep up the good work!
I think the pitfalls around the hooks approach is that a lot of folks jumped over hooks and right into state managers, so their hooks skills are rough, and there can be some onboarding time to bring them up to speed.
Great vid! Using JS here does make it easier to create an example. How would that look with TS?
The one biggest sticking point to going to TS from here is the typing of the context. And probably to avoid having to do some non-null initial state there would be some bang operators in the selectors to state that we are guaranteed a context. In these simple examples we are guaranteed a context. But in a library context you'd want to have the selectors check for the context and either return a default value or throw.
Thank you very much, sir. Great content.
use-context-selector is amazing!!!! do you think it replaces react-tracked? also, since what's your take on react-tracked
I like react-tracked. I've used both.