The State of State Management in React
Вставка
- Опубліковано 12 вер 2024
- I discuss how I like to approach state in React and what my thoughts on Redux, Recoil, and React Context are.
I stream on Twitch now: / benawad
----
Checkout my side projects:
If you're into cooking: www.mysaffrona...
----
Join the Discord: / discord
----
Patreon: / benawad
----
Follow Me Online Here:
Twitter: / benawad
Medium: / benawad
GitHub: github.com/ben...
Facebook: / benawad97
LinkedIn: / benawad
Instagram: / benawad97
TikTok: / benawad
----
Follow me online: voidpet.com/be...
#benawad
Dan Abramov made a tweet saying Ben shouldn't bash Angular, so Ben decided to take revenge with Redux :D
best comment
hahah nice point
plot twist: Dan doesn't like Redux
@@bawad 😂😂😂👌
Best comment ever
This is my biggest beef with React. No one knows what the hell to use. Analysis paralysis and "library fatigue" are serious problems.
@asdf true but also full of stuff and you are always losing time choosing what the fck you want to use
Turns out you can't escape bloat by simplifying bloat with more bloat.
@asdf I mean, JS is a gigantic and ever-evolving beast of a language
And how is that different from any language or framework or library
That's why healthy guys use Angular
Having used Recoil in both small and large applications I can say that it is very useful in both spaces. Recoil is simple to understand, setup and requires no boilerplate to get started. State and hooks are simple.
This in contrast with something like Context, which would require you to setup contexts for each slice of state you need, and likely provide some helpers (e.g. hooks) to easily consume the context.
That said, Context is useful for a lot of things where you may have a lot of logic and custom behavior, specific for your problem space. Using Context in larger applications has multiple pitfalls which can hurt the maintainability of your app. For example, you end up with a provider-soup in some parts of your app. You need to manually apply optimisations to prevent regressions which can slow down the app (which again, could mean more provider-soup).
I am working in a team of two for a semi-large app, and we currently don't use any third-party state management libraries. Just local state or contexts, and we are at a point where it makes sense for use to find a better solution to manage state in a more and more complex application.
last time i was this early, ben was still hating on angular
He got scolded by Dan Abramov lol
@@msolano00 yeah ik
React is for kids, Angular for adults.
@@manco828 Vue for retired
there is a state library named zustand? haha cool :)
I wish could have hair problems like Ben has 🙄
When will he get JS fatigue ?
You might find it interesting that Zustand was made by Paul Henschel too (react-three-fiber, react-spring, etc.)
Zustand means State in german
F
ur hair perfect.
Dan Abramov has left the chat
Redux is like Toyota... not shiny... but works great. Very powerful at scale. Redux is time tested too. Maybe 20 state management library got traction in the last few years. Most of them lost their traction after a few months. Redux still reigns. Dan has no reason to left the chat yet!
@@md.fazlulkarim8847 I have got a lot of respect for Dan Abramov and I personally don't mind working with Redux in huge applications. I will even go a step further and make the assumption that if you want to get a job working with React in a huge application I personally think having a firm understanding of Redux is a must whether you like it or not, with that being said. I just couldn't resist placing this comment beneath this video of Ben because It was the first thing popped into my mind when I saw this. S/o to Ben and keep dropping awesome content and thank you @Md. Fazlul Karim for your feedback
@@nlburnr1 Same here. Thank you.
@@md.fazlulkarim8847 I would agree. It feels like I learn about a new "best" state management library every few weeks, but I never actually see that many people using them, they just talk about them on Twitter on something. They test them for some small experiment project and that's it, it doesn't actually end up in production for some decent project.
Although Redux has a lot of boilerplate and a steep learning curve, I do see a lot of value in it. Its biggest problem, besides boilerplate is the fact that people think if they use React they absolutely must use Redux and that cannot be further from the truth.
@@rand0mtv660 Mobx is killing Redux. MobX died. Redux has already a proven eco-system. Redux Persist, saga, thunk and what not. For smaller apps, I don't see any need for state management library. Next js built their platform without any external state management library, they just used useContext hook! And if you are doing a big project, redux should be on the top of the list because of its larger eco-system!
One thing I like about Recoil is that it's coming from Facebook. If they also open source Stylex, their CSS in JS solution it means that we might get an "official" implementation of these two things. This is something that is missing in React, official way to do these few common things like styling, state management and maybe routing. I like the fact that React is heavily unopinionated, but having few of these libraries as official libraries would definitely be helpful.
But who knows, maybe the fact that Facebook didn't offer bunch of stuff out of the box made the community grow to this level.
Just store everything in a variable and you're fine.
Actually, yes... svelte.dev
just store everything on asyncstorage
I want to store all of my data in a global variable that I need lots of helper functions to access. Can you recommend anything for that? 😝
Just store everything in javascript and you are fine
@@AdrianToddRoss redis and node-redis
BEN you are one hell of a guy. Love this
Ibrahim Joseph lmao right
The sheer amount of tutorials that are on most react courses online about redux are insane, earlier i thought redux is specifically for react, I find most of the time I am okay with context and useReducers unless it is a giant e-commerce app or something.
“Cross reference against some if statements...” made my year 😅
I’ve been using React Context for my social media app as well with Asyncstorage - totally would recommend it, made my life 20 times easier
I typed the URL and got my answer! Thanks man, well done!
Hey Ben!
Really enjoyed your view on react state. Just wondering, are you still using Zustand or do you have a new favorite for 2021? :)
I've been using easy-peasy, and ended up creating a helper function very similar to that Zustand + Immer example. easy-peasy uses Immer under the hood and has really nice Redux Devtools support (I see Zustand does as well, but easy-peasy's also wraps Redux for me so it's out of the box).
tbh, every single one of my actions is that custom `update` function I wrote... so I can definitely just switch to all my actions just being `setState` instead... and I'm getting into react-fiber-three + react-spring + framer-motion + all that jaaaazzz 🎶 and I see Zustand is by same people... hmm... 🤔 Yeah, I'm sold on the Zustand + Immer + Redux Devtools pattern. Will give it a try.
btw SWR/react-query feels bad to use... It makes so many unpredictable fetches that it's hard to keep track of what is doing what. And even if you figure that stuff out, it's really just good for GET fetches... so it's awkward to use it for my GET requests and axios for any other requests... It's really nice for optimistic UI updates, so if anyone is interested in that, check out SWR's Immer example. For me, I'm going to revert back to plain old axios + useEffect/useState on-mount pretty soon, and see if I can figure out some elegant optimistic update pattern there...
I'm rambling. Buzz your head palm tree lookin ass 🤣
+1000 for easy-peasy
Now in 2021, I simply found my absolute comfort zone with simple tiny libraries that are simple as hell. I just use "Simpler State" (simply look it up and you'll see what I mean). >>Was using Easy Peasy before, also good. Tried Recoil, not what i need.
Hey Ben
Wonder what do you think about MOBX for state management?
I'd be curious too
Me too. please make a video for MOBX discussion.
It's terrible lol
state in React became so cluttered that I just architecture better my apps to share state, passing down props is okay, using context is okay as well.
Humor is getting better and better
Just love you videos man super entertaining and educational at the same time keep up the good work!
I have been using Redux for a while. One of the advantages which I personally felt is the ease of debugging when the project becomes a bit complex
Btw another hilariously educative video Ben..
what ab useReducer + context for debugging?
@@turan4265 I don't think you have access to Redux Devtools equivalent and it's timetravel ability. So you would have to debug manually using console.log
That link sends you to Never gonna give you up lmaooo
Nice one Ben. I like the fact that you're gradually opening-up
Redux is pretty solid with Redux Toolkit. It definitely takes some getting used to though. Especially with TypeScript.
And it's a pain in the neck to get it to work with saga
For most use cases Context does the job
I like that opening bit
Zustand. You made me discover a gem. Thank you Ben!
Recoil is pretty awesome tbf, I think there are a lot of immediate advantages even if you don't have "Facebook-sized problems"
Totally agree! I believe the primary reason Redux is still being used is because of the inertia of existing legacy codebases and older devs who had to learn it and now not trying the new and clearly better libraries. Personally React-query for data fetching, Zustand for global state, and either Jotai or just ootb useState and Context Providers for local state.
why do you need zustand IF you are also using Jotai? Jotai can also be, and mostly should, be a "global" state (outside of react-query, client only). Curious why you'd use one over the other?
Ben has a unique way of speaking about stuff that'd make you wonder if you're actually doing the right thing 😄
We heavily use redux at work, i don't use it for async actions but we use it for state e.g. Setting a home gym from a completely seperate headless page. I don't like it, but it works well.
And that’s the problem with Redux that it’s not so much about Redux itself but people try to do async actions in Redux where it’s not intended for. Libraries like react-query and swr are more suited for handling server side states
@@go371211 But isn't that exactly what redux-sagas does? I have watchers watching for sync actions which tell workers to handle the async server stuff.
@@go371211 nevermind, react-query is making stuff i was struggling to do properly with sagas unbelievably easy.
Every time I drop into Ben's video I get to know one more js library!
I think an interesting question to ask would be why state management got so important in the first place. How can we reduce the complexity of state. And do we really have to manage state extensively or is this just a symptom of an underlying problem?
That's what happens when you try to make a backend out of your frontend
@@MaxTheFireCat that's what she said.
Thanks for directions to choose the right tools. This video helps lot.
What I understood is: someone who users redux gave you a haircut 🤔
Redux is the new jQuery
redux-toolkit is now the default instead of redux iirc
you should look at
redux-tools.js.org/
"Angular Lives Matter", Dan Abramov
good comment
I maintain a 3-year old project with Redux all over the place.
I can't say that I'm happy
Ben is right, but a little more on Recoil in case anyone is interested.
Recoil is designed for a specific problem, but I would kind of disagree that it's just a library used to solve a Facebook problem. Indeed it was created to solve a problem at Facebook, but I have myself run into the same situation in an application as well regularly speak on the subject and the problem is not that unique. The design application that Jacques Blom recreated which is very similar to the demo app previewed by the Recoil team at React Europe is a very good demo and shows this problem in pretty simple easy to understand code. I'm also trying to create a demo that takes that same use case and simplifies it, even more, to really show people at what point you may need Recoil instead of Context API.
In short, and I pulled this from the Recoil website:
Context can only store a single value, not an indefinite set of values each with its own consumers.
With all of that said, Recoil is still experimental, you should only be using it when you run across the situation that very few UA-camrs that have tried to explain Recoil have actually covered. These UA-camrs (Not Ben) show you how to switch from Context API to Recoil or how to set up Recoil in your app, and that is not a reason to use it. Yes, it can do the same things Context API does, it has to, in fact, it uses the internals of Context API under the hood, but that is no reason to blindly use it.
Here is a link to a demo application that requires Recoil in order to not suffer from performance issues when adding an indefinite number of components (suqares) to a design canvas and ensuring that when you update the size, etc, that only that component is updated and not the others in the indefinite list. This app also shows other more advanced features of Recoil:
github.com/jacques-blom/recoil-design-tool
Thanks for this simple and yet rather advanced explanation. Just a "quick" comment what you call "parentheses" when doing that sign in the air with your fingers are really called "air quotes" ;-)
The company I’m contracting with is going all in on redux, they built out a centralized library, that handles all of the calls to their cloud services for POS. Pretty soon it will be integrated into every client they have, from web, mobile, even pos terminals.
Wow! Amazing website Ben! More of this in the future!
Hey man, great Idea. I would love to hear your opinion on OvermindJs
Good point Ben. I think most people DON'T like using Redux is this library is too "heavy" and hard to learn at first. As a beginner, you have to know what is "Reducer", what is "action & action creators", .etc before you actually writing down one line of code. Redux is a cool state management library, but sometimes it becomes a disaster when your app becomes larger and larger especially when you did not clearly manage your code structures. Your actions and reducers are just everywhere and you have completely no idea what action will trigger what reducer to work...
BUT, if we look deeply of this lib, you might find Redux is just amazing, and how smart is Dan Abramov. Especially if you looked up the Redux source code and trying to figure the cool ideas behind each line of code, you just get LEVEL UP! seriously, no kidding. I personally think the source code of redux itself is just a beauty.
So if you are a beginner, take a look at of its API and doc, if you don't like it, try to use other lib instead. If you are a experienced developer, you might wanna explore more and maybe read about redux source code and probably you could get some benefit from that.
Just some of my thoughts, again thanks for Ben's effort for making this video
I like to use Redux Toolkit
Thanks for this. I was looking for advice on this very topic
Recoil is so god damn good. I tried it one month ago, but, until Recoil got stable as version, maybe be part of React itself, i will use redux in all god damn app i create. I recently builded Context Api based webshop, its pure crap and mess by working with Context API. I men, context is super strong and stable, but i hate creating providers and wrapping my parent app with those providers. Looks like so manual working. Redux is very simple, but Recoil will kill Redux no mether what!
This sidebar-navigation problem is literally the one I was dealing with. At first, I put the state to context API, as you've said but then I read that it's wrong to wrap a constantly using state to context, so I wrapped multiply components with the same parent component which ended up being responsible for too many things.
guys, try the website he displays on 0:28. Its now been re-designed by ben awad and it looks awesome!!!
Cool video. For sure Redux Toolkit makes redux more bearable, but the majority of apps only need react-query / swr, unless you have a ton of client side interactions, that is the ideal use case for Redux.
React-query is not a global state library, it's just for caching fetched API. New recommendations?
...rxjs behavior subjects for loosely coupled dashboard components, or ngrx if things get complicated. From memory rxjs comes standard with angular (a real framework) :P
I have a plan to use apollo client only as state management . is that good?
I've used redux with redux-thunk and redux-saga, I loved redux in the past that I built some libraries and helpers built around it to make it more manageable since sooner or later your reducers tend to become really long. But there came a time when I started to hate it, particularly because of the limitations that I encountered because of it that I would not have encountered if I was using a better state management, so I just created my own and I have been maintaining and using it since then.
It's not that hard to create your own state management, especially I find that most state management libraries that exists out there are bloated with things you don't really need, but they're there.
Wow,, that's awesome. Would you share your state management with us?
If the scale of your project is small to medium then do not don't tired yourself with more time to write more lines "context API is perfect".
"Redux" is a very good solution for large scale applications , just middlware (saga /thunk) are not exist at context api
Who came up with the exact same title in their mind (State of State management?) :)) I wanted that title for my presentation Thank you Ben
I'm glad you finally addressed the hair!
Great vid man. So many analogies, but i kept up.
Do you have any suggestions on managing re renders caused by using context? If I understand well redux does not cause the same problem. Would that be a good reason to use it?
Shouldnt i be creating a context and using it instead?
I get it, if i wanna change something, whole app would get re-rendered but we have React.memo to prevent it right?
But problem is, wouldn't it be bad to use React.memo everywhere in App? I mean it may affect Memory right?
useReducer is half-redux already so yeah i'll procrastinate on Redux. Good point Ben
04:25 what is the state management library that Ben mentions here? Edited: Ooops just looked at the right hand video Zustand - will try it soon.
As for Redux, , I've been doing React for 3+ years and indeed I haven't touched that over-engineered library until now and I am getting by just fine without it. Just like Angular-JS, I've made the conscious decision to skip anything Angular; just like Silverlight, when microsoft pulled the rug from under everyone. lol
I watched this video 3 times, once before I learned react, once when I began learning react, now in the middle of learning react and I finally kind of understand your marinara comparison, hahaha!
Plz tell me which one is best
people hate complexity with redux on the frontend and love complexity with microservices on the backend the only explanation is those are two different kinds of people
Lol, so we have a 3 year old SPA. Which needs its state management consolidated. Built using redux, then peppered with some mobx because some of the team didn't like all the boiler plate required for redux. This a complex app so react-context will not do also why bare Redux/Mobx weren't great fixes because both of them require great chefs. I've spent the last day trying to decide which library to lean on (btw it won't be bare Redux or Mobx). Need to choose a library redesign the stores/modules and present to them to the team. Personally I'm a bit of a masochist and like Redux however that is not a sentiment I share with many.
Doesnt react have something like service in Angular for this?
React is basically UI library, not a framework as it. so React have almost nothing :D
You choose what you need. Angular on the other side, have too much extra stuff that you probably dont need from the box. At least, as I know.
Redux for life
At least the state of statemanagement in React isn't equivalent to the state of AngularJS
I understand that redux is too complex if you play it as it is, however, if you able to use some extra tools that automate tedious redux work, it will be a very good solution for most of use cases, for example, you can use reduxsauce to automate creating actions, and action functions. you can use redux-logic, a very unpopular library that make the async operation too easy and very maintainable.
Weirdly, my Grandma's name is actually Apollo. Also, just wanted to say I loved your book _The Daily Stoic._
can't believe I got Rick-rolled
Man you are too talented, goals
I Just use RxJS as state management with the react-use-observable package
same here. BehaviorSubjects are easier to work with and basically do the same thing.
Redux with hooks is actually pretty easy to implement. And the whole concept will take you like .5 to 1 hour to understand.
But yea the only place I'll use it is if my app is very huge and and I dont wanna pass the state through like 15s of components.
Context Api with useReducer also works well
Awesome video
useState + Apollo / React Query + Zustand 💪
Lol
looks good indeed, just wondering if wouldn't be kinda overwhelming having Zustand with React Query since you can use the Context API
I tried using standard Redux and it was a nightmare. If I am going to use Redux it will be the Redux Toolkit.
ty. Like your videos.
No mention of effector?
I still haven't found a good substitute for redux-saga outside of redux. Suggestions?
So you think a lot of application's state management can just manage by cache library + context system?
Bro the sad reality is I was in 3rd round of interview everything was quiet well up till now
Interviewer - do you use redux
me - no
interviewer - How do you handle permission
me -(explained)
I got a rejection sad but its quite true people are so obsessed with redux
What if I already know redux?
What do you think about flutter?
How long did you spend centering that button?
I had some luck with angular-style services in react.
It's just an object that inherits a depencency injection thingy so I can test it more easily. And for the methods on the services I use observables to fetch and subscribe to data. To get them into the components I inject them with Reacts context api.
what state management did you use for saffron?
I'm from Brazil, please continue legend video, you're a monster
Try akita it uses rxjs and redux internally
Damn. Just checked the link out. Got Rick Rolled lmfao
Couldn"t have said it better myself
I quite happy with xstate
thanks so much ben 🔥
I got Ricktrolled!
Jokes apart, I got RSI from working on a huge project using Redux 😕 I'm suffering from it since October last year, now I'm really enjoying using simpler and less verbose state management libs, until I need them. Btw, give SWR a try, it's such a small and powerful lib
Am I doing something wrong? I literally only use fetch() calls and use the context api once in a while. Everyone uses all these libraries I never heard of and i feel like I'm missing something. I'm working on a multi page and data heavy app (alot of api calls) and have not touched any state management libraries. I've been using react for about 8 months and I've only ever used Context
Go angular. Go go go
try Effector. for now the best state manager for react apps.
Should I learn Redux?