This Makes State Management so Much Easier

[@thesunabsolute]

I knew this video was about zustand just from the title lol

[@trestres4151]

Same lol

[@adityaj21]

same

[@joshtriedcoding]

Seems like you've been watching some previous videos then. Appreciate ya man.

[@8koi245]

Hahaha ikr it's just too good

[@breakinggood-r2v]

Same thoughts lol

[@remongrabu]

Hope you make more vids about Zustand and showcase more complex real world use cases! This library deserves more exposure but their docs are a mess tbh. They’re also considering removing the “create” api in v5 according to a discussion in their GitHub repository

[@joshtriedcoding]

Interesting! Might just do that! Tried Zustand out half a year ago and just came back to it like a week before I made this video. It felt so refreshing and intuitive compared to context. Definitely some more advanced use cases you could do with this, the challenge is wrapping them into an easy to understand/follow video haha

[@belkocik]

​@@joshtriedcoding I would love to see Zustand Crash Course in your channel as well (combinated with react query to fetch data to your store, e.g handle logging/registering a user to an app). Cheers! :)

[@marcelomagalhaes4508]

Using zustand is as complicated as the video shows. The video could just show a get example, but it's just "get().variable". It can't be easier to use than this!

[@ayushjain7023]

Zustand + React query === Right way to do State management ❤

[@thecarpenter_son]

I think for most use cases jotai is better than zustand for the simplicity. It just feels like global useState while zustand is good if u have a lot of actions in a store and you want it access the value outside of react

[@truongbuipv]

How about recoiljs, should I use which one?

[@justin.johnson]

That's backwards

[@moh6823]

Although it is okay to use destructuring when you are retrieving data from the store, you should be wary for when you want your component to re-render. If you destructure you are getting retrieving all the store, meaning if something changed, the component will rerender. If you want a better alternative, use selectors.

[@franciskintungi]

Show example please

[@syncmaster320]

Yes, you're right. Destructuring the way shown in the video subscribes to the whole store resulting in re-renders whenever any state in the store changes.

[@kamehameha38]

What if you have only one state in the store? Is there still any benefit of using a selector?

[@spicynoodle7419]

​@@franciskintungi const user = useStore(state => state.user) const [user, roles] = useStore(state => [state.user, state.roles])

[@spicynoodle7419]

​@@kamehameha38you almost always store multiple things in a global store, unlike useState. So if you decide to add a new variable you have to go back to all components and change to selectors... or just live with 2-3x slower rendering and more API requests due to unnecessary re-renders.

[@jawyor-k3t]

zustand is a godsend lib. it's so elegant and tiny. great interface too. i discovered it earlier this year and it's really enjoyable

[@agus-wesly]

jotai is awesome too, no provider needed also and they are using interesting approach called atom

[@rog0079]

Hi, great video! Could you make a proper video specifically on zustand, best practices, managing auth state, scalable folder structure, hydrating the state etc. It would be really great as there aren't many tutorials on this.

[@itssammy777]

One of the greatest things about zustand is that It can manage state outside react, so If you want for example to store data via a function that is not a inside a component, and then consume it inside another function totally different, you can totally do it, without react yelling at you for trying to use reactive state outside components.

[@filipjnc]

I love jotai just as much as zustand. It’s from the same devs too.

[@quentinfrancois690]

Great vid as usual, a next one with a real use case of Zustand could be awsome. A pleasure to have new Josh content every week. ❤

[@officialabdulrehman]

Your explanations are really easy to understand!

[@joshtriedcoding]

Cheers man, that's very nice to hear. Means a lot.

[@velkb228]

DUDE. THANKS.

[@daskasspatzle2396]

Just waiting for the Ausnahmezustand. Thanks for sharing, will give it a try.

[@honestslave]

Wow, your videos are always so helpful! I have a new video request - could you make a video on how to use React-hook-form with TinyMCE (Rich Text Editor) on Submit, along with the other input fields? It would be amazing to see you tackle this topic and help us all level up our skills. Best of luck 🎉!

[@joshtriedcoding]

Cheers man! Seems like a very specific use case for an issue you might be having? Never tried TinyMCE to be honest, just slate and editorjs

[@honestslave]

@@joshtriedcoding So then Any Kind of Rich Text Editor with react-hook-form On Submit

[@rand0mtv660]

You just have to either use register() to register the field and then do whatever you want with it or just wrap it in a Controller component as with any other custom form element that cannot just use register() easily out of the box. It's more simple than you think.

[@dg1h1t]

great solution. I wish next team came up with an easy solution to manage state in their apps

[@_y7ya]

I heard before that destructuring on Zustand like you did in 3:31 is not recommended as it causes rerenders?

[@syncmaster320]

Yes, you end up subscribing to the whole store which causes re-renders whenever any state changes in the store.

[@qazyhn94]

Yes it's true in their docs they say the same and it makes it less cleaner sad

[@mfpears]

I don't get why context providers are hard. You provide them once, or your team lead does, and that's it. Years of development without touching it again.

[@freeguy2418]

Quick but Best Explanation! I like zustand for it's simplicity

[@Rasty_Boss]

when new project with zustand ?

[@kiddasneve1677]

your content just blow my mind, thanks. U r awesome!

[@4ndrs_dev]

This came out just as I was starting to learn Zustand ❤

[@jettisonjj]

I hope you make more videos about zustand. You're awesome at this! I'm a fan ❤️

[@kratos_respawned]

Thank you for sharing this , can you please make an in depth tutorial on zustand , how to use middlewares in zustand, async state etc

[@dan110024]

I just spent two days implementing react's context into my app. I figured I need to know why people dislike it so much before passing it off. Safe to say that it got very messy. I can't believe how easy zustand is now lol.

[@mudgalz]

zustand made state management in simple usestate like hooks, so damn amazing

[@BeyondLegendary]

Impressive, very nice. Let's see Paul Allen's state management.

[@satadeepdasgupta397]

Zustand and Jotai are my goto state-management Libraries

[@captainlennysub]

Man I love your videos. Thank you so much for this.

[@Finefik]

Love your zustand pronaunciation

[@rahimco-su3sc]

you are making the web easy ! thanks a lot josh

[@ragtop63]

The original statement is misleading. The example might not show it but you can absolutely modify the state from any of the descendant components under the context provider. You just include the state modifier as part of an object in the provider’s ’value’ property. After that, destructure the object in any descendant component and you have access to it. And the best things is, you only have to destructure the properties you need. It really doesn’t get any easier than that and it’s much easier than having to learn a whole new API since most of the operations you’ll be performing are written in plain JavaScript/TypeScript.

[@joostschuur]

Josh casually teaching thousands of devs how to pronounce 'Zustand'!.;)

[@one2treifor]

It all looks nice and fresh, but I would really be careful with the count of libraries I use, dependency grows, maintainability becomes more difficult. Of course its good to know about this library, and small projects can def make use of it.

[@curiouslycory]

I've been thinking about doing more of this and your video really helps me narrow my thinking on how to implement! Thanks for sharing! Is the thing that tells you the size of your import a vs code extension? That looks super helpful!

[@elbjorno]

With Jotai (same creator as Zustand) handlig global state is even simpler. You should try it out and make a video about it. Its gonna blow your mind i promise!

[@Euquila]

React context was never meant to be a statement manager. It's simply a means of passing context down to children. For example, say you are implementing the renderCell function in a MUI GridColDef --- you can simply useContext to teleport data or pass context down from a great-great-great-....-ancestor without having to worry how to pass the props through a MUI jungle of relationships

[@Leyksnal]

Honestly this lib is a game changer and ever since i started using it , i am not leaving it soon

[@SerenModz21]

have you ever tried Jotai? that seems like another great alterative

[@N3mo_Ahead]

I havent seen much from zustand by now, but how does it compare to Recoil? It seems kind of similiar.

[@jrdn5206]

I prefer state setters to live as exported functions where state is and not destructure. Keeps state state and actions. I believe they recommend this in the docs too.

[@wezter96]

Have you considered making a video on Legend State? Feels like one of the first real options for fine grained reactivity control in the React ecosystem🤔

[@skyzane2735]

Where is that documentations can be found? Any links? 0:20

[@trentcox9239]

with zustand though, if i have a complex component that uses zustand to inject state into deep child components...but i have that complex component rendered more than once on the same page (lets say its a chart with an interactive legend or something), will that work? wont each component behave unexpectedly because they're both deriving state from the same global store?

[@LegendaryAks]

Great video Josh love your content, I have question if you if you use this library or context api on page refresh the value resets. Currently localstorage was a option i found is ther any other workaround it

[@tmoumimahmoud6966]

Thank you, Can I use it for getting connected user info from the cookies ??

[@hazemkawas669]

Thanks a lot, but why i get an error and tell me to change to client component??

[@appstuff6565]

hey josh thanks for this! Im using zustand but not able to persist server (setstate) to server component (getstate), the store doesnt just persist among SERVER components. Do you know what the issue is since we cant directly use hooks to set in server side? I console.log it and it says UNDEFINED.

[@appstuff6565]

it does persist in the same server component (root page.tsx) that i persist it in, but in another server component it becomes undefined.

[@tmoumimahmoud6966]

Thank you , but I have a question and sorry if I seem stupid: suppose that in my application after the user logged in , can I use the state management here (talking about the old way with useContext) to save the return of backend call /api/findUserById/${id}, because I have many pages in my nextjs that need the profile picture and other user info , so I am currently calling the findUserById in those all pages , which is dump ? Thank you in advance.

[@ichigokuro3986]

did you find the answer to this?

[@vince530]

i subscribed, thankyou for this!

[@qazyhn94]

I think just destructure from useState is not recommend, in their documentation they advise to make a new object with selected properties to prevent unnecessary rerenders

[@onyekachijames1636]

does zustand work with server components or one has to do "use client" ?

[@jamshediqbal7936]

What’s the difference between type and interface in typescript?

[@helleye311]

I love zustand, makes state so much nicer. I've practically eliminated context from my apps with this + react query (sure that has a context technically, but I mean, it's just one) Only downside I found for this is, you can't reuse contexts. At least not as far as I'm aware. You can say "from this point onward, use this stuff", so doing anything with forms or individual reusable components still requires standard context if you want to have multiple of them going at the same time. But these tend to be highly specialised, with only a few values passed down, so it's not the end of the world.

[@joshtriedcoding]

Very powerful combo you've got with react query and zustand. Not sure about the caveat you're talking about here, you mean there is a use case where you couldn't rely just on Zustand and needed context along with it?

[@MrREALball]

@@joshtriedcoding Imagine a complex (with deeply nested elements) component that has to be reused across the app with different internal state (I know its a bad example, but imagine a form that rendered in different places in your app but if user fills it in one place, it shouldn't be filled in the other). To create it you could either use prop drilling or context, but can't use Zustand, since its stores act like singletons in an app.

[@aBradAbroad]

@@MrREALball Interesting. I'm actually dealing with this issue right now, and so far I've just been using useState for those form components and using a setter to update the store with the submitted value. I'm not sure if this is an antipattern or what but it works ok. Would love to hear your response.

[@AtizaJuanita]

I wouldn't manage form states. Use React hook form instead and let it do it's magic

[@helleye311]

@@AtizaJuanita yeah, but imagine your form is nested and you don't want to pass the form state though props. You can't use zustand to provide the react hook form setters. Not in a reusable way at least. You can however provide them with context. You can just useForm, pack the output into context and you're good to go for the entire thing. Implementing this at work is my next personal target, no one ever bothered with form libraries there so some components have 20 use states, when they could be useForm + local context

[@LuckyImposter]

what kind of extension highlight the name and appear the description?

[@samanderson4881]

cant wait for the next release of react to literally just be vue

[@anhdunghisinh]

If i implement zustand like this in a nextjs app, will there be any hydration error?

[@abdullah_mufti]

Thanks for sharing this library.. do u think we can use it in place of redux aswell?

[@joshtriedcoding]

Oh yeah for sure. Way more fun to use than redux

[@Leyksnal]

Try it and enjoy the simplicity

[@shri_x1]

Zustand is lit for real (3 months of using it ) its so f*ing good

[@ashuvssut]

zustand's for reducer based state management. Jotai for simple useState like state management. If I were to record this video, I would have done it using jotai

[@anonymoussloth6687]

Hi. Can you do a video with a roadmap for beginners in web dev. What topics, subjects, libraries, tools etc we should learn to become good full stack developers

[@Septumsempra8818]

What should we consider when accessing state on server?

[@kaas99]

I never made sense to me to use Redux. But Zustand, YES!

[@gandalfthegrey2777]

It looks really awesome, I am planning to use zustand in my personal projects over context or redux. But I think there won't be any jobs asking for zustand, Most of them would want me to be proficient with redux right?

[@joshtriedcoding]

Redux is veeery widely used, especially in enterprise contexts. If you wanna go job hunting, I'd definitely recommend learning it. For my own projects I never use it anymore though

[@moosegoose1282]

doesn't work with nextjs without hacks, because zustand doesn't take in initial state, which ppl don't like when u have the state info but client takes a while to initlize

[@mkroven]

tsquery has isloading too?

[@rmcodes]

Jotai seems much simpler to use imo. All of these tools work on the client though but I haven't found one that can better handle the server/client boundary issues (hydration) I've had when trying to use thing like user preferences etc. Maybe there is one out there but I haven't found it yet.

[@LC12345]

This dude knows German. You can tell from the way he pronounced Zustand 😂

[@StephanHoyer]

He is german, I think.

[@ejoojoo]

hope you can do a comparison with jotai

[@saucyreaddit]

Hmm. How about your own version of an e-commerce app?

[@Englishmusic-qi9fp]

It's better than react context api. I really love the name

[@marcelkrause-u4w]

Why don't you provide the context with a setter-function?

[@furo.v]

Lol... the classic "you don't need X to manage state anymore, use Y" meme

[@fraciscro]

Great one! Helpful!

[@othman_]

Josh we would love if you give surrealDB a review

[@erassylzh5658]

Is it make sense to use both jotai and zustand together?

[@rayramadita3018]

Hi Josh! What do you think about jotai as a state manager? Have you been used it?

[@joshtriedcoding]

Going to look into that next and how it compares to zustand / context / redux. Playing around with it will probably be fun

[@rayramadita3018]

@joshtriedcoding I have tried jotai, and it is so cool! Easy setup and powerful as global state management

[@imkir4n]

I found it really hard to understand Redux before. Then, I discovered Zustand and tried it in a project; it's so cool and effective compared to Redux. It doesn't require a lot of setup, boilerplate, and other stuff. Once I understood the Zustand flow, I found Redux Toolkit much easier to use.

[@chrisstucker1813]

Redux is like the PHP of state management. It’s ugly, disliked and isn’t the most elegant but it sure as hell gets the job done. Redux deserves more love lol

[@rmcodes]

@@chrisstucker1813 Redux was an important step in the future like 8 years ago. Sure, its still in use but as we move forward much like jquery its usage will slowly dwindle. Hmm, side note jquery still has updates :).

[@chrisstucker1813]

@@rmcodes redux toolkit is pretty nice and easy to use. Do you use Zustand?

[@PrinzEugen39]

When i discovered redux i was simply amazed by the devtools

[@saadsiddiqui9151]

Zustand is good, but after using Jotai, it has become a lot simpler to manage states in the app in a clean manner

[@tonyabracadabra6935]

let's call jotai production ready recoil

[@KangJangkrik]

Hol' up 1:15 how did you do that?

[@dopetag]

btw Zustand way is better for performance as it will not rerender all components involved ("Everything that consumes a context re-renders everytime that context’s state changes.")

[@joshtriedcoding]

I didn't know that actually, thanks for sharing man. Very interesting

[@dopetag]

@@joshtriedcoding you would still need to use shallow from zustand in some cases when you have arrays or objects in a state

[@ts8960]

so state management is basically having globally accessible states/vars? all this time I thought it was some serious stuff like whatever redux is

[@good-dev-student]

❤ Thank you

[@joshtriedcoding]

Welcome champ

[@naishe]

Jotai feels more fun and simple to me.

[@good-dev-student]

Any new video?

[@SulagnoGhosh]

OMG THANK YOU FOR SAVING ME

[@carlosricardoziegler2650]

I think JOTAI did “same” approach

[@susanoo4081]

Jotai is better for simple cases, however for complex cases just use zustand

[@kingjoo8309]

Good job bro 👍❤

[@smotch7533]

hmm, wheres the reducer?

[@DanielClipsTVS]

Wtf this is so good

[@atemrandyasong5710]

Redux is still champion 🏆

[@mohsinejaz6882]

legendState is king

[@asimalqasmi7316]

Waiting for this 🎉

[@honestslave]

Make A Video On How To Use React-hook-form With TinyMCE(Rich Text Editor) on Submit along with the Other input Fields. BEST OF LUCK 🎉

[@freefakechannel7212]

But we can't use it with next js app dir 😑

[@krtirtho]

isn't the pronunciation "jaa stand"

[@firewatermoonsun]

It looks better than Jotai.

[@d13-s8b]

I love jotai

[@runaway09]

this is like pinia for vue