Picking From 20 React State Managers

[@GVal98]

Great video. Important addition for everyone watching this: Don't use state managers for fetching data, use React Query and you will find that probably 90% of your state is actually server state. And React Query is handling refetching, loading state, errors and caching for you out of the box.

[@belkocik]

Can you elaborate? What if I got an e-commerce app with a cart?

[@GVal98]

@@belkocik When a user is logged in, you store their cart on the server anyway. When adding an item, use useMutation to send a request to add item on the server and automatically refetch all items in the cart. When the user visits the site again, use useQuery to get all the items in the cart.

[@belkocik]

​@@GVal98 What about if user is not logged in? How to handle the problem when a not logged in user added a few items to a cart and then logged in? The question is what if there are items on the server that he added previously when he was logged in? Fetch only the items from server and show them in cart or compare the items in local storage with the server's one and do what? :D How to handle the issue? Would love to see some code beacause I don't know how to do it :D

[@arindam_chowdhury]

@@belkocik Either when adding items, you can ask the user to login to add items. Otherwise, if some items have been added to the localstorage, as soon as he logs in, add those new items to the server as well (need not update the existing items in the server)

[@GVal98]

@@belkocik You can generate a guest id/session/token and use it in requests just like a regular user id. But the server must be ready for this and distinguish users from guests. As for the second question, you just do it like you did before with your state managment. I think it's up to you whether you want to combine items or just download from them the server.

[@topsoilgargoyle]

Jack, your level of detail and research is second to none. Through your videos, I feel i've become a better problem solver and decision maker. A big thanks

[@jherr]

Thank you!

[@elishashapiro7490]

Simply great presentation. I've done some research myself about different libs available for state management, but most of the resources out there compare just a couple of libs. You on the other hand compared almost exhaustive list of state management libs and concepts, giving the ability to distill those concepts into different categories. This is an amazing work with a huge value that I don't belive I can get anywhere else in one single place. Great presentation! And I love that you've also added your personal views at the end, adding more flavor to it, that is also based on relational thinking and business consideration. Awesome content! Keep em coming...

[@jherr]

Thank you! I really appreciate the thoughtful comment!

[@robinkehr1160]

Using an expression in the dependency array is something i probably would never have thought of! Seems like a super useful technique though! Thanks for that! Also, love zustand especially in combination with immer once you get used to the mental model!

[@vitorisaia]

I loved that also!

[@deansacramone6270]

What do you mean "expression in the dependency array"? Where is that, I missed it.

[@deansacramone6270]

@@vitorisaia Where is it, I missed it.

[@robinkehr1160]

@@deansacramone6270 He starts talking about it at 6:50

[@Messirobben047]

React hook lint rule complains about having an expression in deps array. You would have to extract it to a variable and use that instead. Or excuse the rule there.

[@ajeetchaulagain5425]

I have been developing react app for couple of years. But watching your videos makes me re-think about my prod code, and I definitely get some improvements and refactor in the code base ! Man you are legend for preparing clear and concise content. Keep up the hard work ❤️❤️

[@mandalorian99]

simply insane comparison. Im lost for words and the repo for free to go over it. You are a legend! I've been working as a full stack dev for a couple of years now, and yet only came across local and global state implementations. Hopefully with time and practice will get to the level of thinking in architectural way. Props for another great video

[@cryptus_neoxys]

The effort put into this single video is unreal 🤯

[@CosteaMelniciuc]

Actually fantastic work here, we're in the transition of deciding what state manager and model should we go into our business application, and it creates a lot of fuss and confusion, this video's very very interesting and really perfect timing for us :)

[@Messirobben047]

Which one did you finally go with?

[@rosenthalpiano]

Would love to see a video on your point about business logic along with some examples of architectures/patterns that should be considered to keep it externalized.

[@petrhavlik]

I just came across to this video by a coincidence, but it is really good stuff! I am just surprised why it doesn't have more views, your presentation (as well as the code) is very clean plus the value I get from it considering the length of the video is excellent!

[@johncmm9759]

You are such a good teacher, thank you for sharing your knowledge with us. I love your calm demeanor and way of communicating ideas!

[@m0hammedimran]

I just appreciate that you're are experimenting with your content. Great work.

[@jaricurty8906]

Hello Jack, I really appreciate your video quality and subjects you're generally covering. I had a topic that could be of interest to many JS coders; namely "How to set up a NPM module with typescript types and codes that are reused between different project we're working on". Maybe you've already covered it? In all cases, enjoy 2022! (PS: I totally share your API+ approach but with React-Location as router plus I tend to avoid any state manager but using React-Query and the React-Location search URL as a replacement)

[@LaLoses]

A little question, it would be nice if you could explain a bit more about separating the business logic of the code source, because I cannot imagina a way of doing that. I'm going to check in the videos of the channel to see if there is one video about that :)

Best overview of current state managers yet! Great work :)

[@drewbird87]

Incredible how much work and how informative this video is. Thank you Jack, for all the value you share!

[@mikewilliams5571]

34:15 unidirectional is easier for extendible builds also and Redux helps for immutable state changes with common practices

[@aleenaselegy]

Thank you for the excellent content! Can you do a video on the best practices to keep business logic separate from state management and api calls ? Maybe while using something like react query and redux toolkit?

[@jcen1918]

Learning RTK Query for a job interview and your content has been super helpful!

[@naranyala_dev]

wow, you covered what most people don't think, thank you

[@gzuzmark]

Thanks Jack. This categorization is really helpful 🤘

[@fasolplanetarium]

Wow, excellent information - thank you. I've been digging deeper into React after having used Vue professionally for the last two years. Such a comprehensive rundown of all of the various state management solutions in the React ecosystem is incredibly helpful. Even if I may not ever use all of them, I certainly appreciate better understanding what my options are. Looking forward to more of your content.

[@abdelhameedhamdy]

Awesome demo, I remember your writings about adobe flex few years ago what a memory, it is not strange to continue this success and the continuous learning and development journey, keep on Jack.

[@jherr]

Ahhhh, Flex. Some good ideas there.

[@abdelhameedhamdy]

Yeah , I recall components and interfaces same concepts applied now, it was glorious days ...✨

[@goonswarm007]

Adobe flex. Good old days 😅

[@nshen121]

can Cairngorm puremvc robotlegs model works in react world?

[@jherr]

@@nshen121 Wow, it's been a really long time since I heard about the Cairngorn framework.

[@pekwind]

just 1 minute into the video, another instant thumb up for the great job from Jack!

[@hikarukun5126]

I love working with MobX but most devs prefer Redux and now when you showed how Redux Toolkit works and how less boilerplate it needs, I believe I will choose it as the main one (dependent on business needs of course)

[@FilipeCosta84]

It gives a limited overview about the possible stores touching mostly on APIs styles, but it misses 3 important topics IMO: - Performance - it's just slightly touched in 2 cases (prop drilling, and context API) but never compared - Async complexity ... on Redux - the Redux `fetchNames` complexity is ignored, while it's likely the worst part of Redux (and better in any other library) - Mutability vs Immutability - which might be a deal-breaker Thanks!

[@emil0707]

Incredibly clean explanation, thanks a lot

[@MattHeslington]

Love your style of teaching and explaining, Jack. Cheers

[@derekdemaria6728]

Great video Jack! Hope you're doing well!

[@karsongrady]

Great stuff, can't thank you enough. Happy new year, Jack

[@jherr]

Happy New Year to you!

[@real23lions]

Amazing content. I'm new and this makes it easier to understand across the state managers.

[@borasumer]

Great content, thank you. I personally use Apollo Client, React Hook Form and also Reactive Variables from Apollo client to handle the Client side state. I used to couple Apollo Client with React context, until Apollo came up with reactive variables, so I don't introduce another state management tool anymore, and just handle everything with Apollo Client.

[@jherr]

Thank you for bringing this to my attention. It’s really cool to see that functionality in the Apollo client.

[@mikewilliams5571]

32:30 This is literally my mantra.

[@MrPlaiedes]

I'm really enjoying Jotai. Great video, Jack!

[@nivb52]

Thanks! great video as always, (seems also you can apply to editing job now 😉). I would love to see an example how to separate the business logic from react. - What parts you would put in a custom Hooks and what part will remain separated . I don't have a simple example of code to be a use case for that, but I will do my best to help if you want to make a video example. And talk about your new book, I would love to hear about it.

[@shashikantmaharshi9294]

Thanks @jack for covering this topic. May you let me know which vscode theme you have used here?

[@jherr]

Night Wolf [black] and Operator Mono for the font.

[@NeerajLagwankar]

Extremely useful and comprehensive video. Thanks a lot!

[@carsend7412]

Really like the video! Should be worth noting that while Akita is still maintained, the developers started a new project called Elf to use instead. Reasoning just they wanted to do more updates but it would break too many apps using Akita. Seems like long term Elf is their go to.

[@jherr]

Cool, I'll check that ou!

[@agusgarcia9509]

To me, the best state management library is SWR!

[@darksxd]

This is so useful, fantastic Jack as always great content. I love the screen annotations you are doing now. Which software are you using for that effect?

[@WillsB3]

Thank you for such an excellent video Jack. Really informative 👍

[@worldclasscode1847]

Hi Jack, I use React Context + React Hooks. Wow, you really covered the topic :)

[@mortezatourani7772]

Really great stuff. Thanks Two questions though: 1. Do you know any context like library that's ecosystem agnostic and works with VanilaJS as well? 2. Why you favor React hook form over Formik? I couldn't find any superiority or benefit in RHF but the burden of creating so many refs.

[@jherr]

Most of these libraries support external non-React access. But IMHO, what you would be looking for is a library that is not bound to React directly. But which can be can be bound to a React app using hooks. Redux meets that bill, as does MobX, and Effector, as do some others. Some of the newer, lightweight state managers, like Recoil, Jotai, Valtio, Zustand are directly bound to React. So you need to bring in React even if you don't use it. As for form handlers. personally, I lump those in with systems like React-Query, and it's totally valid to just use React hooks + (formik/react-query/etc.) if that meets your needs.

[@mortezatourani7772]

@@jherr Thanks

[@SterlingCobb]

Great Content. I prefer to use relay for both the API and state management if I have some type of api i am working with which is usually the case

[@LaforceM1991]

Thank you for making this video. Saves me a bunch of time, but still alot to think about :-)

[@serg472]

Good overview, but I was hoping to see how these libraries are handling complex states, that's where all the troubles start in vanilla react and when you start looking for alternatives. For example let's say you have a state with the dynamic number of button groups, the number of buttons in each group is also dynamic, and each button's state is an object (color, label, etc). Now you want to change a color of button X inside group Y, and you want only that button to re-render. Something like that, where default shallow state comparison stops working and it becomes very difficult to surgically change state and re-render individual components.

[@RonBentata]

at 7:20 Jack is stating that the useEffect will run only once. but the [seconds > 2] expression is True also when seconds=3 and when seconds=4

[@mahmoudvega25]

what about zustand? I find it really easy to use but I used it in small-medium projects. How does it compare to redux toolkit and in you opinion why would you prefer redux toolkit over zustand?

[@jherr]

Check out the code. Zustand is awesome.

[@JLarky]

@@jherr what about jotai? :)

[@SnOrfus]

Jack, I only found you recently, but absolutely love your stuff! Thank you for making it! I do have 1 question: how do you use pen input to draw on the stream/content?

[@jherr]

I use a cheapy Gaomon drawing tablet, that I actually find a LOT more reliable than the Wacom stuff. It was an HDMI port on it so I can duplicate the screen across both. Then I use ScreenBrush to do the drawing.

[@SnOrfus]

@@jherr thanks for taking the time to reply! Much appreciated!

[@jherr]

@@SnOrfus That's what I'm here for. :)

[@yoJuicy]

Great informative content. Thank you for sharing. You break things down really well! Would love to see some intermediate level Nextjs stuff!

[@loia5tqd001]

16:10 Looks like there's a tweet recently stating that it's wrong. But can I know, whether it's because React has just improved Context recently, or it works like that the whole time? and by "works like that" I mean if using correctly will only rerender the necessary components that subscribe to that context?

[@revold6463]

Single best summary of React State Management on the internet, thank you! I am currently switching a lot between Backend and Frontend-work and I was wondering - what is your take on combining Frameworks like React with Clean/Hexagonal/Onion/...-Architecture Principles for Business Logic? (aka, can you please make a video about this particular aspect? :))

[@jherr]

I'll add it to the list of requests. Hexagonal architecture is fine. I think Clean and Onion are as well, but I'm not sold on "Clean" since it seems like just bunch of small PR issue fixes and not really a coherent architecture, IMHO.

[@lekkyjayz6294]

You didn't say much about how/if Redux Toolkit causes re-renders. Does changing state in the store causes all wrapped components to re-render just like with context hook? Do you have another video that elaborates on this? Thanks!

[@jherr]

It depends on the selectors you write. If your selectors are solid you will get granular updates.

[@user-fg6ng7ej6w]

great review + huge work done on github project. thx

[@grugbrain]

Jack glances at the product requirements and picks one state manager and never regrets it. He is familiar with every state manager out there. 🤯

[@jherr]

Mostly just Zustand nowadays.

[@sraxler]

I did a udemy course for a full stack project where the instructor used MobX and since then I have not been able to use other state management tools to that extent. I want to use redux toolkit but I am not confident using it. Many say that redux is good for large scale applications but I am more familiar with MobX so I am not sure what to use for a professional project.

[@victorlongon]

Nice video as usual :D! I can see some very specific use cases for something like a state machine, but apart from that i have a really hard time seeing why i would need anything else than a unidirectional or atomic state manager, they are so simple to understand and pretty much cover anything i would need. Also as you mentioned i think today with stuff like apollo, react query, urql and react own context i would think twice before bringing a state manager to an application. You can go a very long way without one

[@jherr]

I would add Bi-Directional state managers, like MobX to that list. Honestly, the only state manager model IMHO is kind of optional is the event based systems that sit on top of RxJS. Unless you are already using RxJS I would avoid those.

[@victorlongon]

@@jherr I don't know i am not a big fan of the 2-way streets tbh, but really is just my opinion 😃

[@jherr]

@@victorlongon I like them because I like the spreadsheet paradigm. If i look at a value then update me. If I don't then don't. Though I think the Atomic model better captures the dependency graph aspect of the spreadsheet paradigm.

[@jasondavis87]

This video was really informative. Thank You!

[@tedfitzpatrickyt]

Hi Jack, it’s really neat how you can “draw” on your code screen - are you using Surface or iPad for that?

[@jherr]

screenBrush and a cheap commodity drawing tablet. (I actually find they work more reliably than the expensive stuff.)

[@tedfitzpatrickyt]

@@jherr thanks!

[@edgarabgaryan8989]

cool video! thank you Jack! I can't convince myself to try Akito. too much boilerplate. also classes and decorators are intimidating

[@jherr]

Sometimes it's worth giving stuff a try just to get a sense of the style of it.

[@venicebeachsurfer]

I love Valtio, but I heard those are more experienced than I they worry about Valtio in a larger app/team because of the "trip ups" that go along with proxy'ing state? I figured "ref()" would help that, but do you see these same concerns with proxy state management in larger teams?

[@jherr]

From the tests one of my viewers did the proxy state managers (in particular MobX) performed the best of all the state managers he tested, and it was a wide swath of managers.

[@AbdelhameedG]

Amazing tutorial, Thanks Jack.

[@mehdi-vl5nn]

impressive ,i find it quite useful thanks for your effort

[@j0hannes5]

those graphics are spot on

[@ethanfung1413]

Could you expand on the concept of separating business logic as a custom library from React? I think I agree with the concept, but what is an example of what that might look like?

[@jherr]

Imagine you have a chrome extension and a nextJS web app that are in a mono-repo and they both calculate taxes with some complex business logic. I would use the mono-repo functionality to extract that tax calculation logic into its own package and then have independent jest tests for that package.

[@Messirobben047]

@jack, but mostly you would'nt have such apps. Most of the the times you have a single app which has business logic. How would you go about separating logic in that case?

[@jherr]

@@Messirobben047 How, or why? How is I'd use something like Turborepo or NX to factor out the business logic into its own library. But I'd only do that if it was almost a guarantee that we were going to reuse that logic in another context, either in another web application, or in a React-Native app, etc.

[@SamsButterscotch]

Really really cool video, thanks for the guidance!

[@magne6049]

31:44 Why did you put FSM / XState as not possible to execute outside the React context (Global)?

[@jherr]

There was a subtlety, and it might be fixed now, with XState, that the useMachine hook instantiated a machine on its own. So you can instantiate another version of the same machine and connect to it externally. But if you use useMachine you'll be using the instantiation of the machine that it creates.

[@AbhiVenture]

Great video and there’s a lot you covered I’m bit surprised that you didn’t cover Recoil

[@jherr]

I did, actually.

[@AbhiVenture]

@@jherr My bad and I have no idea how I skipped past Recoil that I was looking for :D. Nice and concise across the board review/intro to state management.👍

[@jherr]

@@AbhiVenture No worries man. BTW, if you like Recoil you will LOVE Jotai.

[@nicolash810]

Extremely good and informative video. This is a good domain comparison that actually helps (instead of 1vs1). From one side I dislike the idea of not having a standard, official, global state. On the other side I like the amount of different approaches. The main problem I see is that means using the library that fits the style instead of use case/performance. Without knowing each library in depth it's almost impossible to know if an application would benefit from one or another.

[@jherr]

What I recommend is that if you are looking at building out a new project and a change in state manager is on the table (it's often not) then spend the time POC'ing a few of these in scenarios that you think are demonstrative of the use cases you'll have, and then see if how they work in those scenarios.

[@dev1876]

I liked it, but you need to take into account how easy they are to unit testing, it is an important factor in teams that do a lot testing or TDD, it is not the same developer experience when test mobx, redux, or xstate. Do you have any video about it? Thanks and Greetings

[@stevephuc5853]

thank you for marking this video.

[@eleah2665]

No sucking up intended here but do we all owe Jack a cup of coffee yet? Traversy is still the overall king, but Jack is the king of react state. Not only does he put all this in a nice tidy package for you he also 1) has a cool new-ish goatee, 2) has a cool new white board, 3) didn't mention Pokemon once.

[@jherr]

Hahah. All Pokemon next week! (just kidding)

[@inversebrah]

fantastic work Jack 👍

[@YakovL]

Thanks for the research! I have to admit, it's not that easy to follow all the differences and especially what are the real reasons to use one of the 4 flavours (not just personal preferences). 1. For instance, which of these models make it harder to debug complex apps? (do observers/subscribers cut us of a way to see what caused a specific change? ..) 2. Do you think it's safe to judge about the amount of ceremony by the simple example provided (extrapolate to large apps), 3. or may be you see some differences in scalability and decoupling logic modules? 4. Is there any performance differences to be aware of? They are probably neglectable compared to not using a provider for global state that causes re-renders per any value change, aren't they?

[@Messirobben047]

Thanks for the great content Jack. Can you may be create a video on how would you decouple business logic in a react app?

[@santosharakere]

Excellent demo. Thanks.

[@shubhamlatiyan7972]

Always loves your videos, Jack.

[@georgekrystev3113]

You’re the best!!! Върхът си!

[@AK-vx4dy]

Impressive amount of work 👏

[@ashtonmiddlefield9819]

Awesome! Could you do a tutorial about using signals from preact, please?

[@ashtonmiddlefield9819]

Hmmm looks like the signal repo is too quiet. I guess we can skip it. it is interesting that signal looks like observable with ease and totally outside jsx (good for testing all by state itself, like a node in the browser)

[@SantoLucasST]

Just found out hookstate and was hoping to see it here. It seems to be the easier to implement, at least for me.

[@nickschmitt8594]

I like XState because when I tell laymen I'm building finite state machines they think I'm smart

[@jherr]

It does sound very cool.

[@lutzruhmann7162]

Hello, very valuable Overview, Thank You!

[@trenthm]

Great video. Thanks!

[@heyiamigor]

Fantastic video! Curious what do you use to draw on top of your screen? :) Thanks!

[@jherr]

I use screenBrush and a Gaomon drawing tablet.

[@heyiamigor]

@@jherr thanks!

[@mikewilliams5571]

34:35 question- noticed the example essentially used the atoms only to set dynamic default values in useState hooks. Do you recommend plugging the atomic libraries in to only do this within an unidirectional ecosystem?

[@jherr]

I'm not quite sure what your question is. Do I recommend using a combination of a uni-directional model and an atomic model together? I don't recommend it, but it's doable.

[@mikewilliams5571]

So in your example it looks like atoms are a lightweight import of methods that can produce conditional default values on render that you are using in the useState hook. Making conditional default values on render might be impossible or spaghetti code without it. Because it looks like you are combining atoms to decide what default value you want. Do you recommend this? Because I would want the extendible code of Redux and then only plug in atoms for this.

[@deansacramone6270]

@@jherr Would be a good idea to talk about what sort of apps/features require an atomic model? I can only think of games. Nearly every single consumer app is uni-directional, no? Would you also put Valtio in the "Unidirectional" camp as far as being legitimate for it?

[@jherr]

@@deansacramone6270 There are a lot of apps that I know of that are using the bi-directional model. Valtio is in the bi-directional camp. Zustand is uni-directional.

[@theyreMineralsMarie]

Wait, if an element in a depedency array is falsy then the given callback won't execute? I thought it was just if the value changed?

[@jherr]

No, dependency arrays are only evaluated to look for differences between this value and the previous value. The value itself doesn't matter.

[@abhinandankhilari9729]

Jack, you say principal full stack engineer. Would like to see some stuff focused on back-end as well 🙂. Nice video by the way.

[@jherr]

I just did one on Wundergraph about GraphQL API architecture, you should check that out.

[@igotbit9454]

I use Apollo Client. it's so easy to use and works well with my GraphQL stuff. Just curious, is there any reason why it wasn't included here? is it not a great state manager?

[@jherr]

The backend service was REST. For me Apollo falls into the API+ category along with using things like react query.

[@ahmedChebilahmed19chebil]

here is some frontend video content i love to see

[@succatash]

Your a stud, keep doing this quality content and you will hit 1million subs. Only suggestion, some shorter "starter" content explaining different topics would be nice. I wish I understood TS, need to learn it. Got the basic understanding of it.

[@jherr]

I do have an entire series on TS kzbin.info/aero/PLNqp92_EXZBJYFrpEzdO2EapvU0GOJ09n

[@surajkewat1253]

Hey Jack thanks for the video. Has your opinion changed on any of the state management libraries also if we can get a 2023 update on this video. Thanks

[@jherr]

Some new state managers have come on the scene but nothing has fundamentally changed in the React space. The only thing I would add currently would be a warning against trying to use signals in React. Signals are great when they are supported by the framework as they are with Solid, Qwik, Svelte 5, etc. But preact signals is a hack and should not be used in production, IMHO.

[@lalumierehuguenote]

I do have a question. I am not sure what you meant by externalizing the business logic. help?

[@jherr]

If you have some complex logic, for example, how to do per-country tax calculations, or something like that. Then put that in it's own NPM module, or at least a different part of the directory structure that isn't related to the UI and then test it independently.

[@dopark1027]

Awesome content! Learning a lot about different state management philosophies. What would be the common examples of the global states outside of React context in typical app development scenario?

[@yashiel]

This is really helpful, thank you

[@learntounlearn2500]

Zustand n react query used together are the best

[@deansacramone2515]

You try it with Valtio or Jotai?

[@deselleg99]

Hi, what’s the tool / setup you use to free draw on the editor?

[@reiniermb]

great overview

[@davidentzat5671]

Thank you for your excellent videos! I would like to ask what would be a good state manger for using with Remix. I've previously read that any state manager will work and also that, in most cases, none is needed. Having the code for the server and the client in the same file is excellent....does it affect in some way to the state? Thanks again for your time!

[@jherr]

I think none is the point when it comes to remix. So if that is insufficient then either something like hookstate, or zustand/valtio.

[@davidentzat5671]

@@jherr Thanks your your answer. I would love to see a future video that explains, in a more detailed way, state management in SSR applications (cookies, server db as redis to store session data, etc)

[@براءسامي-ث9ه]

Nice hard work Thanks !!