NextJS + State Management = Good Idea???

[@demiann4160]

A 10/10 for the quality and creativity in making something unique and so valuable for all of us

[@jacobphillips9235]

Thanks!

[@thegrumpydeveloper]

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.

[@nuitech2190]

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.

[@kadirit]

@@nuitech2190 it will because rhf uses refs for form state out of the box, causing no re-renders

[@garrettdarnell7048]

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.

[@mooshy5944]

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”

[@mattl7599]

Would like to see this also!

[@ashish_prajapati_tr]

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.

[@kodoku2377]

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

[@nishadvadgama]

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.

[@tuRistst]

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

[@silenux7419]

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.

[@krisnarusdiono1304]

sir you are my mentor now, thank you for your videos!

[@markilabot14]

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.

[@albaraa-bin-malek]

Your recommendation at the very end is great. Made my realize so much. Thank you for the thorough video.

[@fernandobaroni1497]

Great content! TIL about Jotai, I'm loving it!! Also I'm really liking this 'Operator Mono' font!

[@tuananhdo1870]

[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.

[@trenthm]

Fantastic. We don’t deserve videos this comprehensive and well done! Learned a ton

[@ThEldeRS]

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!

[@leumasrodama2010]

It takes a lot of work to have a tuts like this., Keep up the good work. Just subscribed., :)

[@alfawal]

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.

[@wardxela]

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.

[@ryanle4059]

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.

[@shift-happens]

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.

[@gugunm]

really love the way you explain, Jack

[@affas_r]

Exactly what I was looking for. Great video. Thanks a lot.

[@jasonma1904]

This video explained so well. Nice work and efforts! love it.

[@shahrzadgheidi6229]

Perfect.. Thank you so much. this was such an amazing wrap up.

[@robertweeden9156]

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!

[@alexsuarez667]

As usual Jack! Excellent video! Keep rocking

[@JasonChannelOne]

Such a helpful video! Thank you 🙏 Do you have any thoughts on ORMs and databases? A video like this for both would be great!

[@matkomilic8382]

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.

[@matkomilic8382]

And I love how at the end "My Recommendations" is added, thats also super important.

[@ThomasBurleson]

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!

[@tomino133]

Another great video. Huge thumbs up!

[@dyunior]

Dang!! just watch few minutes, but this one is saved and bookmarked for later's playlist.

[@byc090020]

Thanks for all your work to educate us!

[@llvae]

This was really helpful, thank you.

[@gemanepa5455]

You're doing god's work here man. Thanks

[@ddomingo]

This video is gold! Thank you sir.

[@milozommer1557]

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

[@sergioccarneiro]

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 👌

[@jimjoseph554]

This is good, thanks for this video. Was really helpful.

[@badasspresso]

God bless people like you! So much effort, so many examples, so accurate… Thank you!!!

[@yuriiholskyi9009]

Amazing video, thank you so much.

[@AtizaJuanita]

Love this video! One tiny recommendation though, I'd write lists of things in plural. In this video pokemon array should be named pokemons

[@chizidotdev]

This has got to be my most rewatched KZbin video of 2022…

[@dgcp354]

After I saw your vid on state management I started using zustand with react query and never looked back. bus never used next yet.

[@jherr]

FWIW, I'm using Zustand in my current project and I'm lovin' it. So easy and reliable.

[@hugodsa89]

@@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.

[@davidentzat5671]

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 🙇‍♂️

[@raygan3]

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?

[@jherr]

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.

[@jose6183]

Incredible timing!

[@alexchud]

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 is a possibility. But isn't that the case with any singleton store?

[@alexchud]

@@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 😅

[@jherr]

@@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

[@alexchud]

@@jherr would that clear the state quick enough if you would have 100 requests coming in at the same time.. I am not sure 🤔🤷‍♀️

[@jherr]

@@alexchud Node is single-threaded.

[@bartgrundeken1428]

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 ;)

[@rajikkali2381]

You deserve WAY more subscribers

[@hugodsa89]

Jack, just thank you 🙏🏻 really great video. This is just splendid.

[@cra2yjoker]

12:07 wow.. how did you do that? Nest the pokemon component into PokemonProvider that quickly?

[@jherr]

Sorry, that's just an edit. :( If you find something that does work that quickly please let me know.

[@thorjuberaalbo]

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

[@joshuastories]

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.

[@Fitzpa14]

How are you able to set the zustand state on the server at 28:45 ? Isn't Zustand only on the client? I'm surprised this isn't causing hydration issues.

[@jherr]

Zustand works on the server too. You just do `[zustandHook].setState` to fully initialize its state.

[@MrKeepItTrill]

The Zustand pronounciation is getting better with every video :)

[@jherr]

Hahahaha. Thanks.

[@fullstack_journey]

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?

[@jherr]

If you put your context provider at the layout level then none of your components will be RSCs.

[@abdurrahmanabu-hijleh6963]

I'm planning to watch this later. What are your thoughts on Vercel's own data fetching library SWR?

[@jherr]

I think I should have covered it as well. Hahahaha.

[@shaqvinluan8455]

do you have a content about what vs code extensions do you use? what extension you use to change the font style?

[@ProgrammingOnly]

tysm sir, really appreciate it!

[@saramshshrestha7641]

Love your videos. Next time i will definitely try jotai or zustard.

[@claus4tw]

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?

[@spongebob93lover]

would love to see a SWR example too

[@MdARahim]

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.

[@adimaralimuddin96]

just look at that zustand! i really loved it. i actually replaced redux and context eversince zustand came.

[@jonathanarturo]

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?

[@spongebob93lover]

i am very curious on that as well, what do you think after 1 year?

[@michaelcasas167]

what endpoint do you get the images for the pokemon from? they look great!

[@jherr]

It's this repository github.com/jherr/pokemon deployed to an S3 bucket.

[@codezero6023]

For useMemo, If you have a big list, would that use up a bit a memory for each list permutation being memoed ?

[@jherr]

useMemo is only one layer deep.

[@aryan_karim]

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 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.

[@aryan_karim]

@@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.

[@TicBox]

kzbin.info/www/bejne/mKHFfaRsg918o5o

[@johnyg8806]

This is pure gold

[@maksym7279]

Great! Thanks!

[@heguer87]

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.

[@jampy42]

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

[@odev6764]

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?

[@sultannasyrov4662]

I've got a questing on mobx example. Whats the point of using store in getServerSideProps and populating it with pokemons if you put them(pokemons) again in useEffect function on the client side?

[@aminedaimallah310]

nice, i was looking for this video, i was wondering too, do we need state management for nextjs, thanks a lot

[@frankli7035]

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?

[@PRonYouTube]

Loved the video. Watched through all of it? Is your zsh config up on github? Looks nice!

[@hundehausen]

What is that folder suggestion in iTerm2? Looks nice

[@jherr]

Fig

[@hundehausen]

Fig already changed my life :D thank you

[@jggabayno]

question. how should I apply the hydration like that when I'm using createReducer with builder?

[@jherr]

With 'builder'? What is that?

[@jggabayno]

@@jherr a Action Reducer Map Builder in the second parameter of createReducer function

[@jherr]

@@jggabayno This is probably best handled over on my Discord server: discord.gg/BCq9PZaW Please ask your question there in the #react channel, but be sure to follow the #rules. In this case any relevant small code fragments (not pasted as images), or any documentation URLs you could provide would help you get a better answer.

[@xtinctspecies]

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

[@jherr]

I may take a look at that.

[@AbdelhameedG]

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 ?

[@AbdelhameedG]

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

[@AbdelhameedG]

Jack seriously you are Amazing , Thank you for this very high quality tutorials you offer us for free! Thank you sir.

[@codezero6023]

I love the summary about state managers - use nothing ! I prefer my own singleton services with update methods and a subscription function.

[@CV0602]

Jack, can you make a video about react tables with typescript?

[@syedhaider0916]

Thank you so much for such quality content. No wonder why this channel is exploding.

[@ricardoolartepuell2011]

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!!?

[@jherr]

gist.github.com/jherr/cb8770e2ae92a7646d22c126be896a72

[@codernerd7076]

Love the video editing and the topic!

[@LuisLopezCool]

Hey man! amazing work. I wondering what is your zsh theme?

[@jherr]

oh-my-posh with the atomic theme. font is JetBrainsMono NF.

[@LuisLopezCool]

@@jherr thanks

[@100timezcooler]

considering a scenario where i need a good sync beetween client and server for operations other than read (mainly update and delete) are all these solutions still good or should i only consider some of them (maybe based on the directionality model)?

[@jamesclark4850]

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?

[@jherr]

If it's updated in the repo then that means I was corrected by someone who knows better than me so we fixed it. :)

[@mukleshossen751]

sir please make video on how to use rtk query with nextJs

[@malikmusa203]

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

[@bepd]

Do you have any suggestions for learning how these libraries work? It all seems a bit like magic to me still.

[@jherr]

When you say "how do they work", are you interested in how you would use them? Or how you'd actually construct one? I've done a bunch of videos on how to use them, but I don't think I've ever done one on how to make a state manager.

[@denilsoncosta9837]

this video answers so many questions that i had, thank for the lesson. I have one question. If i use axios to make a request on get server side props, and i get an error but i intercept using (axios intercept) and made another request. Would the it fail or wait for the second request to complete?

[@learninglane24]

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.

[@amarg26]

Context and react query can be useful as state management?

[@jherr]

RQ can handle data storage, you'd need some extra state to manage the interactive stuff. And yes, context can handle all of it.

[@amarg26]

@@jherr what we can use to handle for the extra state?

[@jherr]

@@amarg26 useState? useReducer?

[@george_bullock]

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.

[@agengo1]

Thanks for such an outstanding video. What if I want to use multiple providers for Context state management can the reducers be combined how can it be done?

[@jherr]

Feel free to ask that question on my Discord server in the #react channel.

[@Alba-ig9hy]

Can you see the redux state on the redux dev tools pannel with this approach? I got it working but I can't see the actions take place in the dev tools

[@jherr]

You should see the initial state coming out of SSR in the redux devtools. But I don't think you would see any actions/states that happened BEFORE the code runs on the client. So any actions/states during SSR would _probably_ not show up without additional work on your part.

[@Alba-ig9hy]

I didn't think of that. But ok, what I dispatch in getServerSideProps doesn't show, fine. But if I add a button and on click I'm envoking a dispatch isn't that happening AFTER the code has run in the client? I have this on a button onClick={() => dispatch(addTodo({name: "The Something", id: 506}))} It works but doesn't show show in dev tools, but isn't it happening AFTER

[@jherr]

@@Alba-ig9hy If what you are dispatching to is a Redux store and you have set up the Redux store with whatever the Redux devtools integration path is right now, then if you aren't seeing it that sounds like a good thing to Google around about and if you don't find an answer then ask the Redux folks.

[@Alba-ig9hy]

@@jherr Cool. I was wondering whether it was an expected effect based on how you configured the store.