Picking From 20 React State Managers

I built the same project with twenty different React state managers. I'll show you around the different models of state management using libraries like Recoil, Akita, Redux using Redux Toolkit, Mobx, and more!
Code: github.com/jherr/which-react-...
👉 What's my theme? Night Wolf [black]
👉 What's that font? Operator Mono
👉 I'm a host on the React Round Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
00:00 Introduction
01:11 State Management using Hooks
01:56 The Application
03:26 Example Code - Prop Drilling
08:11 State manager with Finite State Machines
09:06 Example Code - XState
11:33 API plus State Management
12:23 Example Code - React-Query
13:38 State Management with Context
14:03 Example Code - Context with Hooks
16:23 Reactive State Management
17:28 Example Code - Akita
20:03 Atomic State Management
21:08 Example Code - Recoil
24:28 Uni-Directional State Management
25:18 Example Code - Redux Toolkit
27:49 Bi-Directional State Management
28:54 Example Code - MobX
31:24 Is Your State Really Global?
32:24 Separating Out Business Logic
33:22 What Would I Use?
34:53 Outroduction
#react #stateManagement

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

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

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

[@drewbird87]

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

[@m0hammedimran]

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

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

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

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

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

[@gzuzmark]

Thanks Jack. This categorization is really helpful 🤘

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

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

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

[@karsongrady]

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

[@jherr]

Happy New Year to you!

[@emil0707]

Incredibly clean explanation, thanks a lot

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

[@MattHeslington]

Love your style of teaching and explaining, Jack. Cheers

[@NeerajLagwankar]

Extremely useful and comprehensive video. Thanks a lot!

[@yoJuicy]

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

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

[@WillsB3]

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

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

[@real23lions]

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

[@pekwind]

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

[@SamsButterscotch]

Really really cool video, thanks for the guidance!

[@jcen1918]

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

[@jasondavis87]

This video was really informative. Thank You!

[@inversebrah]

fantastic work Jack 👍

[@AbdelhameedG]

Amazing tutorial, Thanks Jack.

[@LaforceM1991]

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

[@shubhamlatiyan7972]

Always loves your videos, Jack.

[@MrPlaiedes]

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

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

[@user-fg6ng7ej6w]

great review + huge work done on github project. thx

[@AK-vx4dy]

Impressive amount of work 👏

[@santosharakere]

Excellent demo. Thanks.

[@mehdi-vl5nn]

impressive ,i find it quite useful thanks for your effort

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

[@derekdemaria6728]

Great video Jack! Hope you're doing well!

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

[@yashiel]

This is really helpful, thank you

[@stevephuc5853]

thank you for marking this video.

[@dmitriybraginets6750]

Thanks a lot for the great video!

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

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

[@worldclasscode1847]

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

[@unnoticedspacegoat8537]

Great content!!

[@trenthm]

Great video. Thanks!

[@lutzruhmann7162]

Hello, very valuable Overview, Thank You!

[@j0hannes5]

those graphics are spot on

[@vedmack13]

great one, thanks!!!

[@user-dq7tv2ik7j]

Nice hard work Thanks !!

[@srenhyer3895]

Great work.

[@serhiikuzmych4026]

amazing content!

[@mahdikhashan]

wow, that was great!

[@mouneyrac]

This is so good - thank you :)

[@mouneyrac]

By the way Jack, did you do any specific courses for prodcuing such great KZbin videos or you just learn on the go?

[@jherr]

There are some really good A/V KZbinrs out there that cover cameras/mics/technique/etc. Though for educational content like this the old adage applies; content is king. Have decently produced content on topics people want to learn about and you'll get views.

[@mikewilliams5571]

32:30 This is literally my mantra.

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

[@naranyala_dev]

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

[@reiniermb]

great overview

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

[@ibrahimkanber5794]

Thanks for awesome content

[@mikewilliams5571]

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

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

[@georgekrystev3113]

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

[@aziaev]

Thank you very much!

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

[@techviking23]

this is a masterpiece

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

[@berleytrails]

Thanks very much for sharing

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

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

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

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

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

[@learntounlearn2500]

Zustand n react query used together are the best

[@deansacramone2515]

You try it with Valtio or Jotai?

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

[@jameswee]

Great video! Can you elaborate on how to move business logic out of your app?

[@SantoLucasST]

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

[@RubberDuckCoding]

VERY NICE!

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

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

[@betterkeiii]

saved my messed up brain 🤯 really thanks

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

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

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

[@WilliamShrek]

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.

[@djpunisha29]

Hi Jack, could you make a video where you explain how you get the motivation to learn and create content, I am really curious how you stay motivated to create content and always improve? cheers

[@80Vikram]

WOW that's lot of hard word, thanks a ton for making this video. Happy New Year & God Bless You. Can I ask how old are you and since how long you're in IT industry ?

[@jherr]

I'm 53 and I've been coding since I was 13, so 40 years.

[@80Vikram]

@@jherr you are Clint Eastwood of IT industry. Can you please make a video about what motivates you to keep working in IT post 50 ? Money ? Passion ? To kill time ? Keep yourself mentally fit ? I am 42 and here in India majority of people get tired learning new things each year and wish to move to management role where coding is not needed. God bless you

[@jherr]

@@80Vikram trying to figure out how to respond to this for a while. Here is what I came up with. When I was in my thirties I saw Tito puente in a bar in Seattle. He must have been 70 and he was having a blast and loving every moment. If you enjoy what you do, you can just keep doing it.

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

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

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

[@user-wq4se3ro5x]

Hi Jack. Amazing Video!!! Can you recommend a couple of them for a arch with module federation? (oct/2023)

[@jherr]

There is a module federation plalist with all the videos.

[@silarim1852]

I love your content ❤️. I have try a state management call hookstate Js it easy to use I hope you can make a video about it too thanks you ❤️

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

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

[@agusgarcia9509]

To me, the best state management library is SWR!

[@blazefirer]

with the seconds > 2 useEffect to fetch the data, is there a reason that if statement also checking for seconds > 2 is needed?

[@jherr]

Yes, because you will first get run on [ false ] and then get run on [ true ].

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