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.
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.
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.
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”
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
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!
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.
[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.
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.
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.
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.
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!
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 👌
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!
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
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 🙇♂️
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.
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.
@@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.
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
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
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
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.
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?
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?
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.
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
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!!?
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?
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?
Hey i love your videos, since im junior not sure if what im going to say is right so im interested about your opinion, so this video is 1year before. And in this one year nextjs changed much i would say, so do u think this video ll apply for todays nextjs? 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.
Great tutorial as usual Jack , I'm in the use-context part 13:11 you say if you add more pages you have to use the same "getServerSideProps" , my question is , in that case , why not use "getInitialProps" in _app instead of calling "getServerSideProps" in every page ?
Redux looks so ugly next to all these easier alternatives, I just started a new application at work using next.js and used redux to manage authentication state ( I save user JWT token as a cookie, use it on the server -getInitalProps- to fetch user data and populate redux state with authentication state and it was challenging to make this work ) but now I'm thinking of removing redux completely and going for something else
