React hook form is my go to state management no joke. Form fields are the most complex state and have so many hidden states like validity, submitting,submitted etc. It’s important to choose a form library if you’re taking any user input beyond button clicks.
Great, I will check that out. I have a massive form (5 - 7 tab pages) using Formik + Yup. It get really slow when I typing in input box. The whole pages get rerender every keystrokes. I hope React hook form will help.
I'm finally getting into React after being an Angular dev for years, this was really helpful. Loved seeing the RxJS content in there, it helps me connect my old mental model of reactivity with the new.
Was hoping you would go into a flow such as “action” => “state update” => “getServerSideProps” => “Client Hydration & render”. I think what makes nextjs more convoluted when it comes to state management is that you can also treat query parameters as state, which in return continues the SSR even when a person for example goes to “/pokemon?page=2”
your solutions are so bullet proof. i was struggling for how to setup redux in server with data fetching in nexjs ssr. i found it so much helpful. Thanks a lot.
Hello Jack. Loving the typescript implementation in your videos. I think that should be the standard for all JS videos. The type safety and security of what you are doing that TS brings is great for learning.
Thanks a ton. I wanted to use zustand store in RSC to basically feed in state in SSR and then hydrate it in CSR to manipulate that store, after watching your video I can now.
I've always liked this state library called "easy-peasy" which is a very simplified version of redux and uses it under the hood, so you can use most redux features with it. Even redux devtools and it's compatible with React Native
very nice video, thanks a lot for this overview! With NextJS, I exclusively use useState and useContext to deal with state and I was always wondering why state management libraries seem to be so important to many others.
Jack your videos are truly too tier content. Not many content creators actually deserve a like + subscribe but your teaching style and explanations are well worth it! Keep making great stuff!
Thank to you, I know about Zustand. Such an amazing library. Now state management is very simple and I can even access the store outside a component. SO COOL.
Tbh, I would like to thank you a lot, your content always amazes me, knowing what each exactly does and how to use it solves my decision issues. Never subscribed or commented on any channel but you deserve support.
[Copy] Thank to you, I know about Zustand. Such an amazing library. Now state management is very simple and I can even access the store outside a component. SO COOL.
I would've watched this video even if it was hours long, it was so instructive and well made! Thank you for your hard work producing these wonderful videos, Jack!
Beautiful. Creating something that will live on. These videos are special and Im happy for younger upcoming generations for having such videos ready for them. Very enjoyable videos.
I am very impressed with the bandwidth of solutions that you have presented. Extremely useful to think about server-side renderings + data fetch along with client-side state management. Excellent video. Make a donation page and I will donate to say thank you!
Very helpful comparisons, thank you! 🙏 More can be researched though, and I look forward to see your follow-up on this. Would suggest handling 1000 Pokemon next to add infinite scrolling and pagination 👌
Excellent video as always!!! If you are not tired of this subject I would love to see a (perhaps simplified) version for the Remix framwork! 🙂 Thanks in any case 🙇♂️
I love your videos man. Haven't watched this one yet but I'm sure it's gonna be an awesome video. I wanted to ask you if you have/could make a video talking about React query and state management, when is it necessary to add a state manager using RQ, different use cases, etc
Awesome comparison video, I like it. Thanks for you content. But I want to leave a note regarding Zustand implementation. There is actually a little bug that is related to hydration. Let me explain the problem. 1. When you open the page, getServerSideProps gets called and it saves data to the store and passes it as a prop to our page. 2. Then our page component gets rendered on the server and it receives data from the store, not from useEffect (since it is ignored on the server side). Therefore we implemented SSR. 3. Finally, we render our page on the client. Here is where the problem comes in. First we are trying to get the data from the store and of course there is nothing for now because server side store has nothing common with client side one. So our page renders nothing and we receive a hydration error. Then in useEffect we simply fill the data from the prop causing our page component to rerender, showing us a list of pokemon. It might look that everything is working but hydration requires us to create exact same html on the client that we received from the server on the first render. Possible dumb implementation to fix this might look like this: (filteredPokemon.length === 0 ? pokemon : filteredPokemon).slice(0, 20).map(() => ) A better way to do it is to simply replace filteredPokemon with null in the store when it is first created. P.S. I noticed that the same issue also related to Mobx and RxJS implementations.
Great video. I like your style, very enthusiastic, balanced view, great! I use Zustand in a CRA project right now, works great. Btw...looking forward to more Remix stuff, if you have it in the pipeline ;)
Free content. Free like. Thank you for invaluable content. (Within scope of content) thank you for promoting internet health and developer prosperity. That’s priceless in my opinion.
Amazing your videos and explanations, I learned so much with this one and the one of 20 state manager. In that one you say externalize the business logic can you make a video explaining that concept? Thank you so much
@@jherr I personally fell in love with Jotai in this video composing/piping state that is reactive but also you get to reuse the filter functions and so is actually mind blowing.
Jack, this video was great. I love your content. You're the "senior" dev / mentor I wish I had at work 😄. Please keep up the good work. And thank you! 🙏🏾. Let me know if there are other ways to support you besides liking and subscribing; I'm open to that.
All of your videos are great and are appreciated, just a point though the zustand example would introduce cross-request state pollution… as you are not creating a new instance of the store for every SSR request.. as a result the store is shared for all requests coming in via SSR
@@jherr yes that’s true :-), the trick is to check if it’s ssr then you would create a new instance of the store every time and if it’s hydrated on the client you would just return the singleton 😅
@@alexchud You can clean the state pretty easily by doing `useStore.set(initialState);`, and you could to that in the middleware to make sure you catch everywhere
Wow, you deserve more subscriber. I'm glad that I saw your video on Brad traversy's channel and click on your channel link. One question, how do you grasp different technology so quickly and so elegantly? I wish I was that fast.
Hi Jack! This was a great video. I have had the hardest time wrapping my head around making a gql api work with nextjs. Hydrating / rehydrating Apollo cache has been a difficult thing to master
Since NextJS 13 is out... how to do global client side state management now using the app/layout.js file, as i've understood it pre-renders it on the server, will that cause any issues if i put my context providers in there, or what is the better approach to follow for this problem?
What are your toughts using SWR + somestate management? Reasoning behind is the next team (Vercel) recommend it for data fetching on client side, would it make more sense to use just react query?
Amazing, your videos is way above other's 'tutorial' ....Just one quick question if I didn't use on app level of these state datas, how could I use the context store, or it's a bad idea to do so?
Great video, but there is a way to get initial info from api only 1 time instead of each page? like a global state that's been set in server side, and that can also be updated when you build the app, and so that i can access from any component in my app
If I get this right I could also store the json in a singleton and pull that in. This gets a lot more complicated with multiple queries where I would opt into react-query. But I still don’t see the case for a statemanager like Zustand. Wouldn’t that make only sense when we want to use for example the filtered list in a different route?
Great vídeo! I'm now trying to decide between jotai, zustand or recoil for a growing proyect! On the other hand, how You config Your iterm2 like that!!?
How do you do this magic thing with auto wrapping a component. For example in 18:02 you are pasting queryclient probider, the closing tag is before but when you hit save it magically auto wraps component with your query client. Is it some extension or a shortcut?
Could you please make a video on handling searching/filtering (across the entire set of items) incase of using SSR in nextJS with pagination of say hundreds of items.
I had nice insight watching your video, pretty cool.. I have doubt about context api, or if there is another way to do on nextjs, how can I have data fetched once when user enter on site and share this data though multiple pages? for instance if I would like to fetch menus from backend. I noticed you used context on _app but getServerSideProps need to be imported in each page where data was need. I ask this because I don't found any way without disabling Automatic Static Optimization. If I use getInitialProps it will disable it. Do you know any other way to do that?
The code in the redux repo is different from that you discuss in the video? You don't use define or use the rehydrate function. Did you change your thinking?
For the Redux part, the first render on the client side won't display any pokemon. This causes of generating different DOM trees in server vs client. I tried it and even saw a warning that says content mismatch. How can we avoid this?
@@jherr I cloned the with-redux repo, and this warning appeared on the console. Warning: Did not expect server HTML to contain a in . Which means that the first render on the client side doesn't contain any pokemon. And I'm not yet sure if that has any drawbacks regarding SEO.
A 10/10 for the quality and creativity in making something unique and so valuable for all of us
React hook form is my go to state management no joke. Form fields are the most complex state and have so many hidden states like validity, submitting,submitted etc. It’s important to choose a form library if you’re taking any user input beyond button clicks.
Great, I will check that out. I have a massive form (5 - 7 tab pages) using Formik + Yup. It get really slow when I typing in input box. The whole pages get rerender every keystrokes.
I hope React hook form will help.
@@nuitech2190 it will because rhf uses refs for form state out of the box, causing no re-renders
I'm finally getting into React after being an Angular dev for years, this was really helpful. Loved seeing the RxJS content in there, it helps me connect my old mental model of reactivity with the new.
Was hoping you would go into a flow such as “action” => “state update” => “getServerSideProps” => “Client Hydration & render”. I think what makes nextjs more convoluted when it comes to state management is that you can also treat query parameters as state, which in return continues the SSR even when a person for example goes to “/pokemon?page=2”
Would like to see this also!
Thx for videos. Don't lost a motivation to create content. We love your lessons and respect your work!
Ps: special thanks for the work with nextjs
your solutions are so bullet proof.
i was struggling for how to setup redux in server with data fetching in nexjs ssr.
i found it so much helpful.
Thanks a lot.
Hello Jack.
Loving the typescript implementation in your videos.
I think that should be the standard for all JS videos. The type safety and security of what you are doing that TS brings is great for learning.
Thanks a ton. I wanted to use zustand store in RSC to basically feed in state in SSR and then hydrate it in CSR to manipulate that store, after watching your video I can now.
I've always liked this state library called "easy-peasy" which is a very simplified version of redux and uses it under the hood, so you can use most redux features with it. Even redux devtools and it's compatible with React Native
sir you are my mentor now, thank you for your videos!
Such a helpful video! Thank you 🙏
Do you have any thoughts on ORMs and databases?
A video like this for both would be great!
Jack has a high level understanding of his stack and technologies, which leads to a high quality and greatness of his video. Thanks a lot.
very nice video, thanks a lot for this overview! With NextJS, I exclusively use useState and useContext to deal with state and I was always wondering why state management libraries seem to be so important to many others.
Jack your videos are truly too tier content. Not many content creators actually deserve a like + subscribe but your teaching style and explanations are well worth it! Keep making great stuff!
Thank to you, I know about Zustand. Such an amazing library. Now state management is very simple and I can even access the store outside a component. SO COOL.
Great content! TIL about Jotai, I'm loving it!!
Also I'm really liking this 'Operator Mono' font!
Tbh, I would like to thank you a lot, your content always amazes me, knowing what each exactly does and how to use it solves my decision issues.
Never subscribed or commented on any channel but you deserve support.
[Copy] Thank to you, I know about Zustand. Such an amazing library. Now state management is very simple and I can even access the store outside a component. SO COOL.
I would've watched this video even if it was hours long, it was so instructive and well made! Thank you for your hard work producing these wonderful videos, Jack!
This is good, thanks for this video. Was really helpful.
Beautiful. Creating something that will live on. These videos are special and Im happy for younger upcoming generations for having such videos ready for them. Very enjoyable videos.
And I love how at the end "My Recommendations" is added, thats also super important.
I am very impressed with the bandwidth of solutions that you have presented.
Extremely useful to think about server-side renderings + data fetch along with client-side state management.
Excellent video.
Make a donation page and I will donate to say thank you!
Fantastic. We don’t deserve videos this comprehensive and well done! Learned a ton
It takes a lot of work to have a tuts like this.,
Keep up the good work. Just subscribed., :)
Very helpful comparisons, thank you! 🙏
More can be researched though, and I look forward to see your follow-up on this. Would suggest handling 1000 Pokemon next to add infinite scrolling and pagination 👌
Your recommendation at the very end is great. Made my realize so much. Thank you for the thorough video.
Exactly what I was looking for. Great video. Thanks a lot.
Amazing video, thank you so much.
Excellent video as always!!! If you are not tired of this subject I would love to see a (perhaps simplified) version for the Remix framwork! 🙂 Thanks in any case 🙇♂️
Perfect.. Thank you so much. this was such an amazing wrap up.
really love the way you explain, Jack
As usual Jack! Excellent video! Keep rocking
This video explained so well. Nice work and efforts! love it.
I love your videos man. Haven't watched this one yet but I'm sure it's gonna be an awesome video. I wanted to ask you if you have/could make a video talking about React query and state management, when is it necessary to add a state manager using RQ, different use cases, etc
God bless people like you!
So much effort, so many examples, so accurate… Thank you!!!
Thanks!
Jack, just thank you 🙏🏻 really great video. This is just splendid.
Dang!! just watch few minutes, but this one is saved and bookmarked for later's playlist.
You're doing god's work here man. Thanks
Awesome comparison video, I like it. Thanks for you content.
But I want to leave a note regarding Zustand implementation. There is actually a little bug that is related to hydration. Let me explain the problem.
1. When you open the page, getServerSideProps gets called and it saves data to the store and passes it as a prop to our page.
2. Then our page component gets rendered on the server and it receives data from the store, not from useEffect (since it is ignored on the server side). Therefore we implemented SSR.
3. Finally, we render our page on the client. Here is where the problem comes in. First we are trying to get the data from the store and of course there is nothing for now because server side store has nothing common with client side one. So our page renders nothing and we receive a hydration error. Then in useEffect we simply fill the data from the prop causing our page component to rerender, showing us a list of pokemon.
It might look that everything is working but hydration requires us to create exact same html on the client that we received from the server on the first render. Possible dumb implementation to fix this might look like this:
(filteredPokemon.length === 0 ? pokemon : filteredPokemon).slice(0, 20).map(() => )
A better way to do it is to simply replace filteredPokemon with null in the store when it is first created.
P.S. I noticed that the same issue also related to Mobx and RxJS implementations.
Love this video! One tiny recommendation though, I'd write lists of things in plural. In this video pokemon array should be named pokemons
tysm sir, really appreciate it!
Great video. I like your style, very enthusiastic, balanced view, great! I use Zustand in a CRA project right now, works great. Btw...looking forward to more Remix stuff, if you have it in the pipeline ;)
This video is gold! Thank you sir.
Free content. Free like. Thank you for invaluable content.
(Within scope of content) thank you for promoting internet health and developer prosperity. That’s priceless in my opinion.
Amazing your videos and explanations, I learned so much with this one and the one of 20 state manager. In that one you say externalize the business logic can you make a video explaining that concept? Thank you so much
Thanks for all your work to educate us!
This was really helpful, thank you.
Another great video. Huge thumbs up!
After I saw your vid on state management I started using zustand with react query and never looked back. bus never used next yet.
FWIW, I'm using Zustand in my current project and I'm lovin' it. So easy and reliable.
@@jherr I personally fell in love with Jotai in this video composing/piping state that is reactive but also you get to reuse the filter functions and so is actually mind blowing.
You deserve WAY more subscribers
you are always so great, thank you so much for explaining this. Seems simple but when we don't know we just don't know lol.
Jack, this video was great. I love your content. You're the "senior" dev / mentor I wish I had at work 😄. Please keep up the good work. And thank you! 🙏🏾. Let me know if there are other ways to support you besides liking and subscribing; I'm open to that.
Incredible timing!
This is pure gold
All of your videos are great and are appreciated, just a point though the zustand example would introduce cross-request state pollution… as you are not creating a new instance of the store for every SSR request.. as a result the store is shared for all requests coming in via SSR
Yes, that is a possibility. But isn't that the case with any singleton store?
@@jherr yes that’s true :-), the trick is to check if it’s ssr then you would create a new instance of the store every time and if it’s hydrated on the client you would just return the singleton 😅
@@alexchud You can clean the state pretty easily by doing `useStore.set(initialState);`, and you could to that in the middleware to make sure you catch everywhere
@@jherr would that clear the state quick enough if you would have 100 requests coming in at the same time.. I am not sure 🤔🤷♀️
@@alexchud Node is single-threaded.
The Zustand pronounciation is getting better with every video :)
Hahahaha. Thanks.
Great! Thanks!
Love your videos. Next time i will definitely try jotai or zustard.
Wow, you deserve more subscriber. I'm glad that I saw your video on Brad traversy's channel and click on your channel link.
One question, how do you grasp different technology so quickly and so elegantly? I wish I was that fast.
I'm a big fan of you, Because of security reasons for JWT Token please make a video on the refresh token in NextJs.
I'll thankful to you
great ... you always great
Thank you so much for such quality content. No wonder why this channel is exploding.
Hi Jack! This was a great video. I have had the hardest time wrapping my head around making a gql api work with nextjs. Hydrating / rehydrating Apollo cache has been a difficult thing to master
I may take a look at that.
This has got to be my most rewatched UA-cam video of 2022…
great content.
very much your efforts to help us noobs out.
You are a diamond
nice, i was looking for this video, i was wondering too, do we need state management for nextjs, thanks a lot
just look at that zustand! i really loved it. i actually replaced redux and context eversince zustand came.
RTK + RTK Query 🔥
Yeah it's bestest..
Loved the video. Watched through all of it? Is your zsh config up on github? Looks nice!
Jack, can you make a video about react tables with typescript?
I love the summary about state managers - use nothing ! I prefer my own singleton services with update methods and a subscription function.
would love to see a SWR example too
Since NextJS 13 is out... how to do global client side state management now using the app/layout.js file, as i've understood it pre-renders it on the server, will that cause any issues if i put my context providers in there, or what is the better approach to follow for this problem?
If you put your context provider at the layout level then none of your components will be RSCs.
do you have a content about what vs code extensions do you use?
what extension you use to change the font style?
Hi Jack! I'm really amazed of quality and content of your videos. Could you make the same video but using next 13 please?
sir please make video on how to use rtk query with nextJs
I'm planning to watch this later. What are your thoughts on Vercel's own data fetching library SWR?
I think I should have covered it as well. Hahahaha.
Subscribed, like and share.
I love you.♥
Love you too! Thanks for the subscribe!
Zustand is the BESTTTTTTT
Love the video editing and the topic!
Jack please do more videos for remix run.
What are your toughts using SWR + somestate management? Reasoning behind is the next team (Vercel) recommend it for data fetching on client side, would it make more sense to use just react query?
i am very curious on that as well, what do you think after 1 year?
Amazing, your videos is way above other's 'tutorial' ....Just one quick question if I didn't use on app level of these state datas, how could I use the context store, or it's a bad idea to do so?
Hello Jack, awesome video.. can you make content on react native.?
12:07 wow.. how did you do that?
Nest the pokemon component into PokemonProvider that quickly?
Sorry, that's just an edit. :( If you find something that does work that quickly please let me know.
Great video, but there is a way to get initial info from api only 1 time instead of each page? like a global state that's been set in server side, and that can also be updated when you build the app, and so that i can access from any component in my app
If I get this right I could also store the json in a singleton and pull that in. This gets a lot more complicated with multiple queries where I would opt into react-query. But I still don’t see the case for a statemanager like Zustand.
Wouldn’t that make only sense when we want to use for example the filtered list in a different route?
Great vídeo! I'm now trying to decide between jotai, zustand or recoil for a growing proyect! On the other hand, how You config Your iterm2 like that!!?
gist.github.com/jherr/cb8770e2ae92a7646d22c126be896a72
How do you do this magic thing with auto wrapping a component. For example in 18:02 you are pasting queryclient probider, the closing tag is before but when you hit save it magically auto wraps component with your query client. Is it some extension or a shortcut?
That's just a rough edit. I just pulled out the section where I moved the tag around. If you find and extension like that, lemme know! Hahahah.
For useMemo, If you have a big list, would that use up a bit a memory for each list permutation being memoed ?
useMemo is only one layer deep.
Could you please make a video on handling searching/filtering (across the entire set of items) incase of using SSR in nextJS with pagination of say hundreds of items.
You're awesome!, ^^
Hey man! amazing work. I wondering what is your zsh theme?
oh-my-posh with the atomic theme. font is JetBrainsMono NF.
@@jherr thanks
I had nice insight watching your video, pretty cool.. I have doubt about context api, or if there is another way to do on nextjs, how can I have data fetched once when user enter on site and share this data though multiple pages? for instance if I would like to fetch menus from backend. I noticed you used context on _app but getServerSideProps need to be imported in each page where data was need. I ask this because I don't found any way without disabling Automatic Static Optimization. If I use getInitialProps it will disable it. Do you know any other way to do that?
The code in the redux repo is different from that you discuss in the video? You don't use define or use the rehydrate function. Did you change your thinking?
If it's updated in the repo then that means I was corrected by someone who knows better than me so we fixed it. :)
For the Redux part, the first render on the client side won't display any pokemon. This causes of generating different DOM trees in server vs client. I tried it and even saw a warning that says content mismatch. How can we avoid this?
I haven't seen that. If you like you can post a github or stackblitz link on my Discord server in the #react channel and folks can have a look.
@@jherr I cloned the with-redux repo, and this warning appeared on the console.
Warning: Did not expect server HTML to contain a in .
Which means that the first render on the client side doesn't contain any pokemon. And I'm not yet sure if that has any drawbacks regarding SEO.
ua-cam.com/video/bpbLq6NxIm8/v-deo.html
what endpoint do you get the images for the pokemon from? they look great!
It's this repository github.com/jherr/pokemon deployed to an S3 bucket.