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

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

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

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

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

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

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

[@krisnarusdiono1304]

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

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

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

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

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

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

[@البراءبنمالك-ر1م]

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

[@leumasrodama2010]

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

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

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

[@trenthm]

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

[@affas_r]

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

[@shahrzadgheidi6229]

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

[@yuriiholskyi9009]

Amazing video, thank you so much.

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

[@jasonma1904]

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

[@gugunm]

really love the way you explain, Jack

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

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

[@badasspresso]

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

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

[@hugodsa89]

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

[@alexsuarez667]

As usual Jack! Excellent video! Keep rocking

[@llvae]

This was really helpful, thank you.

[@ddomingo]

This video is gold! Thank you sir.

[@byc090020]

Thanks for all your work to educate us!

[@ProgrammingOnly]

tysm sir, really appreciate it!

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

[@saramshshrestha7641]

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

[@jacobphillips9235]

Thanks!

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

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

[@gemanepa5455]

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

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

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

[@tomino133]

Another great video. Huge thumbs up!

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

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

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

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

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

[@MrKeepItTrill]

The Zustand pronounciation is getting better with every video :)

[@jherr]

Hahahaha. Thanks.

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

[@rajikkali2381]

You deserve WAY more subscribers

[@chizidotdev]

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

[@jose6183]

Incredible timing!

[@maksym7279]

Great! Thanks!

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

[@syedhaider0916]

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

[@adimaralimuddin96]

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

[@johnyg8806]

This is pure gold

[@codernerd7076]

Love the video editing and the topic!

[@aminedaimallah310]

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

[@PRonYouTube]

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

[@weizhangJustin]

我使用的是redux-toolkit，because it's powerful

[@spongebob93lover]

would love to see a SWR example too

[@kumailn7662]

great ... you always great

[@codezero6023]

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

[@dennisgonzales9521]

RTK + RTK Query 🔥

[@raheelsiddique1631]

Yeah it's bestest..

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

[@anhvuuc8693]

Zustand is the BESTTTTTTT

[@mukleshossen751]

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

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

[@CV0602]

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

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

[@dimaandoniev544]

Hi Jack! I'm really amazed of quality and content of your videos. Could you make the same video but using next 13 please?

[@suryapratap3622]

great content.

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

[@stavroskefaleas6320]

Jack please do more videos for remix run.

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

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

[@shaqvinluan8455]

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

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

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

[@EricEGunes]

You are a diamond

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

[@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. :)

[@suthanharihara]

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.

[@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)?

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

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

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

[@johndevnoza4223]

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

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

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

[@nhplayssudoku4488]

Great video. Now, do this with nextjs 13 app directory

[@jherr]

Challenge accepted. kzbin.info/www/bejne/haGwcntond9-n5o

[@nhplayssudoku4488]

@@jherr Great!!! I was just watching that video. Thanks a lot!!!

[@Handle3649]

Zustand makes the code so much cleaner compare to redux.

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

[@bolence79]

One questions here in Mobx part. I'm having exact same code for my app. And everything is working on first run, but the main problem is when I'm call api from search part and I want to update mobx store with new data from the response, the mobx store don't update my state and return previous state. Can somebody share some thoughts? Thanks.

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

[@soundnimation]

great video, but the state is lost when you refresh the page, how to avoid this?

[@jherr]

That's standard. All memory will be cleared on a page reload. You can either send updates back to the server as they happen, so that you'll have the data when you refresh. Or you could use localStorage to store the state locally in the browser, but that is NOT going to sync the localStorage with the server without additional work, and you could have an issue where the localStorage and server states need to be synchronized which can have issues.