Why Everyone Loves Zustand

[@OpticIlluzhion]

My mental Zustand worsened with every time you said the word

[@cubimon8219]

Das sind ja Zustände hier

[@marcialabrahantes3369]

that's how language works unfortunately, assuming you respect/like the speaker. Shoosh-tand!

[@adityaanuragi6916]

It's pronounced zustand not zustand

[@mattburgess5697]

Bro you have it backwards

[@nothinghollow]

smartest comment ever

[@CoDEmanX47]

It's actually pronounced Zustand

[@adityaanuragi6916]

@@CoDEmanX47 nope it's zustand

[@everythingisfine9988]

Lol tap the translate button in KZbin 😆

[@samuelgunter]

i love it because it's not redux

[@devxsadik]

Real 😂😂😂

[@jatiquep5543]

I hate redux😅😅😅

[@sfishy5540]

This guy gets it

[@a1x5h04]

Nailed it!

[@farhadjaman5580]

Why hate it so much?😊

[@snotvlek4721]

0:45 American moment

[@SubwayToSally90]

Very american, yes. We also could start calling Theo "See Oh" and just "dont care" :D

[@belphegorPrime]

@@SubwayToSally90 SEO

[@pequod4557]

ZOOSHTANT

[@bomjism]

more like typical behaviour of any native English speaker who's never had to learn another language

[@qazyhn94]

I think it means state in English not condition :) source living in Germany

[@TheBadFred]

Zustand also means "state", which fits better IMHO.

[@FyyMyy]

Zustimmung!

[@excalibur2417]

Daumen hoch!

[@nopenope1]

ah, there it is, the German muss jetzt kommentieren-drang ^^

[@よしくん-k4n]

Haha it should be cuz another state library from the same author is named Jotai, which means state in Japanese.

[@panzerdriver]

You know what's cool, redux devtools

[@Monstermash355]

Because it's just so simple to setup and use. However its simplicity comes with a cost, it's unopinionated therefore can lead to inconsistencies. The key thing to remember when using zustand is to never NOT use a selector, otherwise you'll subscribe to your whole store and trigger absurd amount of rerenders where you call it without one. (const foo = useStore((state) => state.foo)) Also, not using the slice pattern can lead to headaches when one store needs something from another.

[@PraiseYeezus]

lol honestly, using a 'getter' is such a basic code pattern i'm not sure that fits as being 'opinionated' or coming with a 'cost'

[@firasrabaia]

@@PraiseYeezus He meant having the ability tp cause problems when having conplex use cases

[@martinlesko1521]

Wrong, Zustand does have the slices pattern as well, read the docs next time: zustand.docs.pmnd.rs/guides/slices-pattern

[@Monstermash355]

@@PraiseYeezus Well, what can happen is one guy can write 10 stores and another will write 10 slices which is inconsistant, just one example

[@emanuelcepoi]

Agree, people don't understand how powerul Redux Toolkit + RTK Query is and how nice it is to use it due to its opinionated nature. Theo just has a way of picking the worst technologies and pretend they make sense. I'm at a point where I just know that if Theo talks about something I gotta avoid it.

[@JLarky]

I like that the poll doesn't even have the right way to pronounce it 😂

[@BurgerBurglar8964]

If it's written in Murican I'm pronuncing it in Murican

[@joschkazimdars]

zuh-shtand would be correct

[@terra_creeper]

​@@joschkazimdarsGiven that "z" is usually pronounced like in "buzzing" and "shtand" looks like "stand", i'd write the pronounciation as "tsoo-shtund".

[@joschkazimdars]

@@terra_creeper actually, trying to describe a pronounciation with english letters seems impossible. They have different sounds for the same letters all the time.

[@terra_creeper]

@@joschkazimdars I don't think it's impossible, just very hard. Single letters don't have a consistent pronounciation, but most letter combinations do. You just have to add letters until there is no ambiguity anymore.

[@bkschatzki]

A lot of people saying that Zustand is like Redux Toolkit but less extra. But sometimes even Zustand isn't needed. Jotai is unbelievable when you just want to have little bits of state that you can grab from anywhere. They're different tools.

[@PhilipAlexanderHassialis]

Exactly. It all depends on the case scenario. For micro-states, Jotai is an excellent tool. If on the other hand you have cases where you need big complex states due to the application's needs then Zustand is an excellent choice - and, surprisingly, it works really well with NextJS (unlike Redux Toolkit - at least in the current incarnation).

[@gben82]

In Italian and German you pronounce the "z" (zed) like "tz"--just like the "z"s in pizza--it's not that difficult. Hence: "Tzoo-shtand"

[@officialdinesh]

Yeah and I don't think Google AI voice is better as it feels like she said Zoo-stand.

[@Novalis1504]

And the „a“ in English is often times pronounced like an „ä“ in German or an „æ“ in danish. The correct „a“ for „Zustand“ would be the first a in „arbitrary“ :)

[@deepjaysoul]

I think “Tzoo-shtunt” would be the closest…

[@edism]

Bro, how do expect him to say that when he can't even say mirror? Murrrruuur

[@NoahSteckley]

Not relevant for speaking English

[@NoiseLeGGa]

Ok, let's call him Otto for the rest of our lifes.

[@brennenrocks]

I would love to see your thoughts on Jotai and why you might use one vs the other

[@notker88]

You should not judge tools based on extremely basic examples, but more if they can support also support complex fully modular apps. I would rather use a little too heavy tool for small apps and know I have no trouble when it grows and needs to be modulaized, then a lightweight tool where I know I might get in trouble at some point and have to refactor the whole app. Most engineers and companies don't do that research, which costs them sooo much money. Research also needs experience of course, you cannot do research when you never built large scale application, because you so not know what to research and what is actually important.

[@xReDxTuRtLeZx]

i have been around since pre mustache theo, but post-needs a haircut- theo, joined as someone brand new to web dev, have enjoyed my time with my website since! and the discord has grown to be so large and is still such a great place to have discussions and help. time flies

[@prerit714]

At this I kind of don't care what state management library is used in a project, just understand the observer pattern (or redux in UI) once and every other library is just a syntax sugar.

[@IronMaidzen]

and thats why, even though I'm German, i give my projects english names. 😂

[@vetrivendhan6122]

Why is everyone falling in the same trap. According to the functional programming we don't have to mix data and functions. Use pure atoms from Jotai and pass it to the custom hooks/context. State managers should only store the state and should not modify by itself. This will complicate the React app more than you think. Please experiment with these guys. Peace out.❤

[@alcar32sharif]

"Meine Fresse was für ein 'zustand' hier auf diesem Kanal" 😂

[@MichaelReich]

Nicht mal richtig ausprechen kann er es haha

[@LC12345]

@@MichaelReichNo offense but German pronunciation isn’t intuitive at all. And I speak enough German to make myself understandable.

[@cobrasys]

@@LC12345 German pronunciation might not be intuitive, but at least it's consistent, which is way, way, _way_ more than we can say about English. I don't speak German at all, I barely know a few words and sentences, but I immediately knew how to pronounce it just by looking at the word.

[@LC12345]

@@cobrasys You’re lying at one end here. Either you know German or you don’t know that a beginning Z is pronounced “ts” and that this word’s “st” is pronounced “scht” because it’s the beginning of a combined word. Stop playing.

[@mickdavies5647]

​@LC12345 what a weird false dichotomy. You're suggesting that it's impossible to know a few words or sounds in a language without being able to communicate in it. Most people know and can correctly say the name 'Einstein' which requires correctly handling the 'ei' German dipthong

[@rajikkali2381]

Because its the closest thing to Pinia for React

[@alexmachin1785]

Yeah that's I was thinking 😅 It's the closest thing I've find so far.

[@MaxOut931]

I’m a German and I love how you pronounce “Zustand” - I’ll start a petition to change the official German pronounciation into “sust and”

[@bkschatzki]

You use the "s" to spell the /z/ sound. Identity checks out lol.

[@blenderpanzi]

I'd say tsoo-shtunned.

[@sierragutenberg]

As a German, I read the title and I was like "Did he activate auto translate for the title?", but then I was "Oh, he means the Zustand library" lmao

[@ngideo]

I like the tip on using a context for a zustand store and not treating it like a global store. I think I'm going to try that out.

[@TheScottShepard]

“It’s interesting how getting used to the React way lead you to overlook simpler solutions in plain JS to the same problem.” I couldn’t say it better myself regarding all of these redux-like solutions. 99.9% of you don’t need it.

[@TheLazyCat000]

btw zustand is german and is pronounced tsooshtund

[@torsten_dev]

tsoo-shtund

[@ggascoigne]

The ability to access the store from outside of react is super handy when you want your fetch-like functions (i.e. the functions you end out passing down to react-query) to have access to things like auth or token data, and you want to avoid huge amounts of prop-drilling.

[@blenderpanzi]

Tsoo-shtunned. German for state.

[@VKD007]

I added this in my orgs main FE product and this going fun. Its so easy and fun to use.

[@notker88]

Actually there is only little difference of the code in the components with Zustand vs RTK. Yes you write more code with RTK outside of the components, but you also get working devtools. With Zustand the redux devtools time machine for example does not work and it does not seem that this will be fixed anytime soon since Zustand has no control over that repo.

[@zayne-sarutobi]

It's works for me tho? Why is that?👀

[@notker88]

@@zayne-sarutobi Time machine works for you? I tested it a few weeks ago and it did not work. Issue is also still open in GitHub. Redux-devtools 1369. You can go forward and backwards in redux devtools with Zustand with the forward and backward buttons? Unlikely

[@notker88]

@@zayne-sarutobi sorry it is the Trace that is not working. Also confirmed it with the maintainer in Discord. They cannot do much there.

[@AfyaTelemed]

Am using ably for my chat.. what do you recommend?

[@MDOY79]

I don't want all my business logic in functional components so I like the saga middleware option to interact with redux. Is there something similar in Zustand?

[@AlwynWymeersch]

I might just rewite my entire project from redux to zustand just because of the hoops I had to jump / hacks I had to implement Agora. Great solution!

[@dellavita3463]

I like nanostore more, it simpler and framework agnostic.

[@ShaneGoodson]

I pretty much wrote an implementation like zustand when react contexts came out because we werent allowed to use mobx and i hated redux that much.

[@eter_inquirer]

Its like you read my mind w these videos

[@warin2176]

I think use-context-selector solves the problem of useContext causing unnecessary rerender

[@guxit]

I like Valtio the most because of it's simplicity. Also has selective rendering and ends up with less code than Zustand.

[@4w0ken]

Zustand stand, zu Stand stand, und als es zu Stand zu stand, stand es zu.

[@shubhampawar7475]

You can potentially optimise the useContext hook which will only trigger re-renders for values that are changed. I think Jack Harrington has already made a video on this, something like "Moving fast with react context"

[@hamit795]

hi Theo, what's your opinion about MobX? would like to hear it

[@abdelalikabou9197]

I love it. and I use it always on my projects. Thanks Zustand to save me from Redux hell 😅

[@kabukitheater9046]

i heard zustand is pronounced 'not-redux'

[@mirko_lon]

Theo pls if you like zustand you need to try Effector, we use at the moment effector and migrate from redux. I'm not joking but it's better than zustand and TS working more correct

[@Vedariy]

Hey guys, can anybody explain me why does RecoilJS RIP? It was very excellent in case of async data and complex reacting on atom changing via selectors? Thanks. I found it more usable than Jotai (which is often called simplified version of RecoilJS). The separation in naming of 'Family' and 'select' was cool to build a kinda pre-architecture in 'state' terms. It was clear what is source of truth (atoms) and what are reflectors and reactive states. As well as where it was something like solid state - origin atoms and selectors, and where there are sets of many - families.

[@xsh4n400]

What would you recommend for realtime/websockets communication? Roll your own, or another service?

[@mohammadyahyaq]

Redux toolkit + rtk query are so underrated 😢

[@kissmyussr1993]

Nope, redux is a pain even with them

[@ShafickCure]

It's ok. The boilerplate is ridiculous.

[@mohammadyahyaq]

@@ShafickCure the boilerplate only on the setup And toolkit gives you hooks for your api's automatically (unlike react query where you need to write them yourself). Also it handels caching and invalidation automatically I tried both redux toolkit and react query and I think toolkit has less boilerplate than react query 🙃 Although toolkit has some missing features like infinite scroll (I've never used zustand though, so I can't compare it)

[@martinlesko1521]

@@mohammadyahyaq React Query isnt a global store like Redux, its an async state manager.

[@mohammadyahyaq]

@@ShafickCure the biggest weakness in toolkit in my opinion is the documentation Probably that's why people don't use it 😅

[@Wakkyguy]

What about Jotai?

[@loudboomboom]

Jotai ftw

[@nithinbhandari3075]

I use jotai, it just simple to setup, using in production website, it works.

[@vetrivendhan6122]

The video creater may not use Jotai. I use Jotai for state management and custom hooks to update it. Everything works great. ❤

[@bzbetty1]

XState is much easier to pronounce

[@headexplode2741]

But still 99% of companies still ask Redux experience in resume...😢

[@vetrivendhan6122]

The managers don't need to work on this shit. They just want someone to maintain all this shit that he/she wrote. 😅

[@TonyGustafsson]

Didn't knew it could do granular updates/rerenders... makes me wanna try it out even more.

[@rafcins]

It's a fantastic library. It's incredible.

[@Lemmy4555]

State management is EASY if you get/set in an imperative way and use reactivity when needed only to read and show in the ui. As a FE developer that had the opportunity to work with all major frameworks (AngularJS, Angular 2+, Vue, React and Svelte) i can tell that React and Angular communities really do state management in the most over engineered way. stop putting "middlewares"/"asyncThunks" in the damn global store. Just write a bunch a functions that you call from the components and those functions will just get/state from the stores. It works great in case of SPA, since you can put stuff in modules. In case you need SSR just use whatever solution the framework provide to have per session context or the context api directly and pass this context to the same functions, the context is what will keep the reference to the global stores.

[@Zepi2509]

Love your content Theo. But i‘m German and 1:52 wasn‘t that far away 😂 but it is always funny to see amaricans try to pronounce german words ❤

[@Clickworker101]

Great to have an American say German words.as always Trying is good enough. Batteriezustand Zustand dee Korvette

[@cathadan]

One day the world will discover react-tracked and truly appreciate it. For now it's just a library that came before its time, and zustand gets all the love.

[@marcushaaland4355]

Why use zustand for fetched data instead of tanstack query? 5:55 And why would you fetch from Tanstack Query then put into provider instead of just using cache as global state? 6:55

[@shark950621]

Why should you never look up the source code (10:07) ? I heard it's actually very much the opposite for understanding how things works.

[@peppergrayxyz]

Is this why countries and many cities have English names in addition to how they are pronounced in their native language, because English speakers simply don't bother?

[@Leonhart_93]

Native english speakers are some of the most inept at learning a second language and wrapping their heads around different pronunciations, because they don't have that much need to learn a 2nd language.

[@mickdavies5647]

A lot of English people can't even speak English correctly. I have a lot of respect for all the people in countries like Poland that have a very complex pronunciation system of their own and can still speak English better than many native Engliah speakers

[@culturehyena]

That one’s colonialism

[@tichopad]

Cool vid! Using children reference in the useMemo dependency arr is going to re-create the memoized instance due to JSX always returning a new object for children props in React. Also, driving re-renders off of the result of a selector function is not unique to Zustand - Redux does the same thing.

[@sinanyilmaz9887]

What I've Learned in 7 Years as a Developer (JavaScript/React/Python) Use as few packages as possible. Keep things simple. Need shared state? Forget Redux or Zustand-learn React’s Context API. Is your app complex? Don’t overcomplicate it. My frontend team spent two weeks refining our internal guidelines, and now our structure is straightforward and easy to maintain-without touching any state management libraries. Start thinking for yourself. Need a package to check if an array is empty? Write your own code and tests. Sure, a package installs in 10 seconds, but maintaining it (and the others) is a time sink. When one package works with Node 20 and another doesn’t, guess what-you’re stuck maintaining even more. Oh and you also have to do that in your 20 micro applications. Stop making things harder for yourself. The JavaScript ecosystem already has enough mess.

[@zayne-sarutobi]

Context API would've been great imho, expect it isn't performant when used as anything beyond a simple transport mechanism

[@programmerjowo]

Fact. Many developer use too many library just to overcomplicate their code

[@everythingisfine9988]

Moral of the story. When working with React use the *Fewest* amount of React features possible 🤕

[@brucearmstrong5536]

Was using it for my first react project, clean and simpler than redux

[@jaykay4211]

That part about children prop needing to use memoizisation - Was the issue that when the context updated state it would re-render the children? Children was an element not a component so it wouldn't re-render it anyway which we did see wasn't the issue. Just wanted to confirm I'm not missing something in my understanding of re-renders. React only re-renders all non memoized children components when state changes not elements.

[@realitydesigners]

wow learned alot in this one

[@Diego_Cabrera]

I found Jotai first so I never zustand a try. I might tho, it seems promising

[@afifzilani3485]

For many days I have had a question: which browser are you using?

[@khuramshahzad9089]

Recoil is great too ...

[@rugucloud]

zustand has some issues too. It doesn't reset state automatically when you move between pages. This can be inconvenient in certain use cases.

[@fhucko]

Maybe it just means that react is thinking you render same component? You can add wrapper component and render the full component with key based on url parameters.

[@igrb]

if your store gets initialised together with a component you'll not have this problem

[@zayne-sarutobi]

Create a scoped store solves this

[@str.haysam]

all Germans crying

[@captainlennysub]

Redux is the most ridiculous thing I’ve ever seen. It complicates things to unnecessary degree. I remember spending hours trying to understand WHY they do things the way they do it, but their documentation is one of the worst out there. It did slightly get better when Toolkit came out, but seriously too much stress and abstraction hidden in complicated documentation. Zustand saved my life.

[@thepetesmith]

We have one opinionated way to enforce consistency. Every action like actionSetFoo is prefixed with the word action. This way everyone isn’t coming up with their own naming.

[@fu886]

Good to know Theo came down to use object oriented programming

[@arcanernz]

Last time I tried a new state management library (recoil) I ended up tearing it out and replacing it with redux toolkit since recoil had a memory leak that crashed our app. So I’m weary of new libraries in which swapping it out is very laborious.

[@kstash3564]

That's the same reason I'm sticking with RTK (for now at least) ... The design, planning, qa, and code quality of the Simpsons guy is far superior IMO. Jotai and Zustand just doesn't give me that professional feeling, if you know what i mean.

[@beepdotboop]

I started watching you during the 'needs a haircut' phase..the porno mustache took me a while to get used to

[@emreq9124]

bro, react never says that use Context for state management. It is usually for props drilling to children. It hasnt been like a performent state manager at all. But, in most cases, React can handle such rerenders with efficient way. But the library still need some performant way inside. Maybe next versions have optimized Contexts usages with selectors

[@victor95pc]

I migrated from Ably to Soketi in a large app, definitely worthy, Ably is terrible

[@heidji]

It's just the best out there.

[@andreasherd913]

meh Zustand has also too much boilerplate, been using effectorjs in many projects and nothing comes even close to it.

[@tom.watkins]

Zustand + Context API is great / makes the context API actually useable

[@statuschannel8572]

I do the following setup Client state - zustand Server state - React Query aka Tanstack query is there any scenarios where i should use context API?

[@tuananhdo1870]

I use zustand only

[@tuananhdo1870]

@@statuschannel8572there is no

[@maukomaunde7075]

You don't need Context if you have Zustand, since the latter already tracks state

[@arogueotaku]

I don't understand why you would need context api if you have zustand? Can you please give a use case?

[@mirastyle]

Hate to break it to you, but the second time correctly pronounced was actually not correct :)

[@klausbjarne]

ngl I prefer nanostores, works with other things such as Astro well as well - and it's easy AF to use

[@developerjk]

I am using Zustand to store userdata once I login in localstorage. And calling api again if i update user profile. This way I dont have to call api again and again if page refresh😅

[@jacobwwarner]

Ist es Deutsch? Edit: me thinking about the German pronounciation... *first 2 minutes using Google translate to pronounce it* me - I need to tell my coworker, the only other person I've met in 6 years whose learned German! This is too funny 😂

[@juxuanu]

Preact signals is a good alternative to all this.

[@ilyasanders4169]

use logic outside of react is a good approach, but mobx better allows to do that much simple and convenient way

[@trustonyemachi8098]

Zustand is my babe, so much love

[@thepetesmith]

I hated React until I started using Zustand. It’s perfect.

[@LeFlamel]

30 min confirmation that React is a footgun.

[@Muphet]

10 years ago when i started learning javascript, it was either react or vue for me. i hated redux so much i wen't vue way. zustand might be the only reason i would convert

[@blubblurb]

I use Valtio, I love it even more. It's even from the same dev(s?).

[@grugbrain]

oh man that blush

[@lasse-mo]

As a german this is outrageous :D

[@shreyanshjain9479]

Missing zustand in angular

[@rex_melynas]

I like zustand, what i don't like are some of the "best practices" of it.

[@titidantete]

i think at first thoughts, zustand is sustained, its states like situation that you could preserve its value... and yeah, after use zustand then learn using redux make me think, redux is true problem on the earth....

[@gkiokan]

This is somewhat hilarious. Never had such a problem with vuex using vue. Can someone explain me why you love to create more complex codebase and complex styles and then need a new library to fix it? Is react so much faster compared to vue? I can't relate, but I love the simplicity of vue in combination vuex-pathify which makes it even simpler to use. Keep it simple.

[@sylum3]

A minute 4 comment that I'll probably delete, but why would you use Zustand or any other store if you already have the data in the React Query cache?

[@t3dotgg]

Zustand is great for when you don’t have the data in React Query. I use it for things like A/V device selection, game states, theme picking etc

[@timgreller]

Das sind ja Zustände hier

[@oscarljimenez5717]

The last example actual solution is to move the "useUser" hook in a new Component with the , something like . This way you will avoid unnecesary re-renders. Also, keep in mind, that with React 19 Compiler, Selectors as idea won't be needed anymore, so i recommend to everyone to migrate to simple React Context for client state managment.

[@zayne-sarutobi]

This isn't true tho

[@oscarljimenez5717]

@@zayne-sarutobi can you explain?

[@zayne-sarutobi]

@@oscarljimenez5717 I mean that the react compiler doesn't solve the issues of selectors Although Andrew Clark did mention they might work on supporting a pattern where useMemo and context used together would act like a selector for context... But as far as I've heard, no further news on that end

[@oscarljimenez5717]

@@zayne-sarutobi that was an initial idea. After that they decide that you don't need useMemo for that. That the compiler will solve it automatically. Currently, it should do it, if not in the future for sure.

[@zayne-sarutobi]

@@oscarljimenez5717 If so, I'm really excited for what the future might hold.. Till then tho, zustand remains my lover

[@TerriMcGray-p3o]

Susana Walks

[@stevereid636]

Learning Redux and being able to demonstrate my knowledge of it was a BIG plus in getting me hired on more than one position. Hate on it if you must, I’ll just be over here getting paid 💰

[@evensteven5161]

Nanostores ftw