What State Management Library Should I Use with React?

[@TheKurotsu]

My team and I just got a new project, and our team lead wanted us to make POC for different state management libraries. This video was extremely timely!

[@alvechy]

Jumping straight to XState makes one David somewhere in the world smiling

[@benmitchinson9831]

Sent this video to a dozen devs. Great great explanation that I will be referencing for a long time.

[@aaaliii4u]

now that is called awesome! thanks for the great tutorial and a taste of history.

[@pieter-venter]

Thanks Lee for always having high quality videos with all the dense info in a very short time. I know it's not easy to edit a video like that and you probably need to repeat shooting parts multiple times. No "umm..." or "okay, let's wait for that to install"

[@codersagora9837]

Hey this video is really useful for our community, thanks!

[@leerob]

Thank you! Glad you found it useful.

[@geralt36]

Using zustand and immer with typescript. Never enjoyed doing state management so much before.

[@mitejmadan8672]

Thank you for creating this video. It really helped me to understand react and state. I didn't know about the types of states in an app. For the past couple of weeks, i have been working on a project which requires fetching a lot of data in my next app. basically I wanted to create a dashboard. I wanted to reduce unnecessary API calls. Today I got to know about SWR. I knew about react query but never knew what it does. This video literally summed up everything. I am watching your videos for the past couple of days they are really helpful

[@leerob]

I really appreciate this comment. Glad I could help!

[@MightyKingKala]

Great video!

[@vs599318026]

Such a great content but would like to see you create in depth videos for differnet state management lib or even intro to the upcoming useSelectedContext!

[@ogbillity]

use react query to manage your server state. redux and other libraries are not ideal to manage server state lifecycles. react query handles caching, fetching, and updates asynchronous data. if you remove all the server state from redux or other libraries to react query, your global state becomes very thin.

[@cheeriozkitty]

This is the best video I've seen on this topic. Thank you so much for all of the great info here.

[@RYeah100]

lol I said "it depends" in the same time haha, great video Lee thanks!

[@ashishshinde7070]

Excellent👍

[@frankybegue9492]

fantastic video. also appreciate the excellent bookmarking 👍

[@roobannadarajah7989]

Who can dislike this. Cheers buddy

[@Daniel-ve8yr]

would you only use a caching library like SWR if you don't expect the API results to change in the short term? for example, if you're fetching stock quotes, i would imagine you don't want to used the cached result from 2 minutes ago.

[@aromal_anil]

Every project don't need heavy libraries like Redux/Recoil. Sometimes you just needs to create and consume global states. "react-rhino" is a library which does exactly the same with simple and straight forward syntax. It uses Context API under the hood, but is very very simple than useContext.

[@domsbuhendwa924]

Always great content Thank you for all

[@yilmazbingol4838]

great explanation.

[@RickRyan26]

Great vid!

[@kristiankramas5944]

Wow. This was great.

[@stej2248]

Hi, I am using pullstate which is very very easy while comparing all other global state management for react of redux, recoil, jotai etc. Is it good to use pullstate? Since I am a beginner i am finding difficult to choose the global state management.

[@minhquanma]

thumbs up for Schiit Stack behind

[@okidokiyowyow356]

Can I ask whats your react stack? Like what library do you use/like?

[@mikkaruru]

Thanks Lee! What state management solution can be used for keeping global state of websocket data coming from IOT sensors to dashboard?

[@CodingNuggets]

For small projects Redux is not needed, but as a project grows it may become necessary. The Context API is great for side and small projects, but may not be enough. I use Redux mainly, but I'm starting to use react-query for my fun/side projects. Appreciate your input Lee. See you soon!

[@dacks22]

Your thoughts on zustand? Great vid Lee

[@leerob]

Thank you! The Zustand authors seem to be recommending Valtio now: twitter.com/dai_shi/status/1358568517100920832

[@rakeshpaul5691]

@@leerob didn’t know about Valtio. I was using zustand + immer for one of my projects. I also found recoiljs very similar to zustand

[@ricardocoutinho6183]

What do you think about recoilJs?

[@leerob]

4:45 😁No strong opinion other than it works well for certain use cases.

[@ГенаПетров-н5ы]

What library best for figma like app?

[@erickgeneric]

Wow. I’m going to have to try swr 😳

[@moniruzzamansaikat]

thanks for such a video

[@jdratlif]

I think only components that have useContext and their children rerender, not every component under the context provider.

[@onurbamaro]

Client state: Hookstate Server state: React Query I've reduced a ton of boilerplate-y code with those Have fun

[@mazenfayez5824]

hello, did you try zustland? would like to here your thoughts, i think it is the simplist one so far.

[@renegadeace1735]

What's so bad about prop drilling? Verbose yes, but clear and easy to understand, also yes!

[@sleepysud]

Makes it painful to maintain / re-write code.

[@Ace_Qnemes]

Go make something bigger than todo list and you`ll find out

[@unmy400]

I'll write this while i'm still watching the video, so i'll comeback later if the answer is in the video How SWR data that was fetched from an API is available to all my components as a global state? or it is that it doesn't make a fetch to an specific route if it was called previously by another component 🤔

[@leerob]

SWR provides the caching layer for you. So if you make a request to /api/user, you can use the useSWR() hook in 100 places across your codebase calling that same endpoint, and they're all looking to the same place in the cache!

[@abumubarak_dev]

@@leerob Amazing even without internet connection?

[@TeamEternalEmpire]

@@abumubarak_dev yes

[@snakezize]

React-query.

[@snakezize]

Redux adds a lot of unnecessary complexity and setup. Even in large projects, most of the time you don't need redux. Also, many times a lot of state don't need to be at the global scope and with redux people tend to put everything as global state. Unless redux middlewares like sagas are needed and are properly used, redux is unnecessary.

[@snakezize]

@@shahzadaalihassan_vlogs Yes

[@CodingNuggets]

@Jack Saat This is true, but Redux is overkill for many projects.

[@krtirtho]

react-query

[@rpgzan2028]

React Context for context and xstate for state! context is the values you need through a component, state is a state!

[@suhanbangera884]

I was frustrated by redux🥴. I ended up creating my own state management library 🥴🥴

[@alejomakevids]

I was trying to learn how to luse redux with redux tk, but then the docs mentioned the use of IMMER. It was a totally turn off for me.

[@Mobilemaniaplays]

Zustand

[@botyironcastle]

just use angular it doesnt suck

[@ThomazMartinez]

Zuuuuuuuustanddddddddd

[@varandpezeshkian6299]

the answer is, all of them, I usually combine context/swr/hooks. Going forward I can see redux become less popular.

[@ehsankhorasani_]

I prefer zustand

[@matheusvictor9629]

just don't use redux and you will probably be okay (or better than with redux)

[@vasileturus]

You should use redux, sorry guys

[@lardosian]

I think the central store is a big advantage, I have been trying context and use useReducer which is fine for small projects but doesnt feel right as things start to grow.

[@vasileturus]

@@lardosian same here

[@ufufu001]

but it's so hard

[@vasileturus]

@@ufufu001 I agree

[@exactzero]

@@ufufu001 Check out redux-toolkit. Much easier and cleaner code.

[@xseman]

none.. more bloat more complexity

[@xseman]

@Jack Saat Throwing other problems at a problem is not the solution