Picking From 20 React State Managers
Vložit
- čas přidán 27. 07. 2024
- 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 - Věda a technologie
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
Thank you!
You are such a good teacher, thank you for sharing your knowledge with us. I love your calm demeanor and way of communicating ideas!
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 ❤️❤️
I just appreciate that you're are experimenting with your content. Great work.
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!
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.
Can you elaborate? What if I got an e-commerce app with a cart?
@@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.
@@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
@@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)
@@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.
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!
I loved that also!
What do you mean "expression in the dependency array"? Where is that, I missed it.
@@vitorisaia Where is it, I missed it.
@@deansacramone6270 He starts talking about it at 6:50
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.
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
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.
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...
Thank you! I really appreciate the thoughtful comment!
Best overview of current state managers yet! Great work :)
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 :)
Which one did you finally go with?
Great informative content. Thank you for sharing. You break things down really well! Would love to see some intermediate level Nextjs stuff!
Thanks Jack. This categorization is really helpful 🤘
The effort put into this single video is unreal 🤯
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)
Love your style of teaching and explaining, Jack. Cheers
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.
Incredible how much work and how informative this video is. Thank you Jack, for all the value you share!
Learning RTK Query for a job interview and your content has been super helpful!
Extremely useful and comprehensive video. Thanks a lot!
Great stuff, can't thank you enough. Happy new year, Jack
Happy New Year to you!
Incredibly clean explanation, thanks a lot
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?
just 1 minute into the video, another instant thumb up for the great job from Jack!
Amazing content. I'm new and this makes it easier to understand across the state managers.
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.
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
Thank you for making this video. Saves me a bunch of time, but still alot to think about :-)
I'm really enjoying Jotai. Great video, Jack!
Really really cool video, thanks for the guidance!
Thank you for such an excellent video Jack. Really informative 👍
Amazing tutorial, Thanks Jack.
Always loves your videos, Jack.
Hi Jack, I use React Context + React Hooks. Wow, you really covered the topic :)
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?
This video was really informative. Thank You!
Great video Jack! Hope you're doing well!
fantastic work Jack 👍
great review + huge work done on github project. thx
Impressive amount of work 👏
Excellent demo. Thanks.
impressive ,i find it quite useful thanks for your effort
Thanks for the great content Jack. Can you may be create a video on how would you decouple business logic in a react app?
Great video. Thanks!
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.
Thank you for bringing this to my attention. It’s really cool to see that functionality in the Apollo client.
thank you for marking this video.
You’re the best!!! Върхът си!
Hello, very valuable Overview, Thank You!
Thanks a lot for the great video!
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?
This is really helpful, thank you
Nice hard work
Thanks !!
34:15 unidirectional is easier for extendible builds also and Redux helps for immutable state changes with common practices
Great content!!
wow, you covered what most people don't think, thank you
great one, thanks!!!
amazing content!
Great work.
wow, that was great!
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
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.
@@jherr I don't know i am not a big fan of the 2-way streets tbh, but really is just my opinion 😃
@@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.
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.
Ahhhh, Flex. Some good ideas there.
Yeah , I recall components and interfaces same concepts applied now, it was glorious days ...✨
Adobe flex. Good old days 😅
can Cairngorm puremvc robotlegs model works in react world?
@@nshen121 Wow, it's been a really long time since I heard about the Cairngorn framework.
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? :))
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.
those graphics are spot on
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.
Cool, I'll check that ou!
great overview
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 :)
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.
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.
Thanks for awesome content
cool video! thank you Jack! I can't convince myself to try Akito. too much boilerplate. also classes and decorators are intimidating
Sometimes it's worth giving stuff a try just to get a sense of the style of it.
This is so good - thank you :)
By the way Jack, did you do any specific courses for prodcuing such great CZcams videos or you just learn on the go?
There are some really good A/V CZcamsrs 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.
Thank you very much!
Great video and there’s a lot you covered I’m bit surprised that you didn’t cover Recoil
I did, actually.
@@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.👍
@@AbhiVenture No worries man. BTW, if you like Recoil you will LOVE Jotai.
32:30 This is literally my mantra.
Thanks very much for sharing
Just found out hookstate and was hoping to see it here. It seems to be the easier to implement, at least for me.
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.
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?
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.
@@jherr thanks for taking the time to reply! Much appreciated!
@@SnOrfus That's what I'm here for. :)
this is a masterpiece
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.
I do have an entire series on TS czcams.com/play/PLNqp92_EXZBJYFrpEzdO2EapvU0GOJ09n.html
Jack, you say principal full stack engineer. Would like to see some stuff focused on back-end as well 🙂. Nice video by the way.
I just did one on Wundergraph about GraphQL API architecture, you should check that out.
Thanks @jack for covering this topic. May you let me know which vscode theme you have used here?
Night Wolf [black] and Operator Mono for the font.
VERY NICE!
Great video! Can you elaborate on how to move business logic out of your app?
saved my messed up brain 🤯 really thanks
Zustand n react query used together are the best
You try it with Valtio or Jotai?
You're a React God! Please keep making content! I'll check your page out. If you haven't already please make videos on Svelte and NextJS!!
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
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 ?
I'm 53 and I've been coding since I was 13, so 40 years.
@@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
@@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.
Awesome! Could you do a tutorial about using signals from preact, please?
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)
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 ❤️
Jack glances at the product requirements and picks one state manager and never regrets it. He is familiar with every state manager out there. 🤯
Mostly just Zustand nowadays.
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!
I think none is the point when it comes to remix. So if that is insufficient then either something like hookstate, or zustand/valtio.
@@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)
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!
Hi Jack. Amazing Video!!! Can you recommend a couple of them for a arch with module federation? (oct/2023)
There is a module federation plalist with all the videos.
Fantastic video! Curious what do you use to draw on top of your screen? :) Thanks!
I use screenBrush and a Gaomon drawing tablet.
@@jherr thanks!
sir, currently I am using nextJs with reduxtoolkit & rtk-query, can it be made simpler(less boilerplate) by replacing it with react-query & zustand ?
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.
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.
@@jherr Thanks
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?
Check out the code. Zustand is awesome.
@@jherr what about jotai? :)
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?
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.