Тёмный

Redux or Context in React 

Ben Awad
Подписаться 497 тыс.
Просмотров 99 тыс.
50% 1

I explain when I like to use a state management library like Redux vs. regular Context in React.
Context: codesandbox.io/s/lurh9
Easy peasy: codesandbox.io/s/cool-butterf...
----
If you like cooking, checkout my side project: www.mysaffronapp.com/
----
Join the Discord: / discord
----
Patreon: / benawad
----
Follow Me Online Here:
Twitch: / benawad
GitHub: github.com/benawad
LinkedIn: / benawad
Instagram: / benawad97
Twitter: / benawad
#benawad
TikTok: / benawad ​

----
Follow me online: voidpet.com/benawad
#benawad

Наука

Опубликовано:

 

28 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 68   
@SeanMatheson
@SeanMatheson 5 лет назад
Hi @Ben Awad - author of easy-peasy here. Happy you have found the library useful. This is a really really great video - thanks so much for making it. It's really important that people understand the trade offs between context and solutions like Redux/Mobx/et al. Even though I am the author of easy-peasy I would always recommend people take some time to consider the best solution for their state management use case. Look forward to more videos from you. 👍
@thedeveloper4207
@thedeveloper4207 4 года назад
Hi.....Even I have used Easy Peasy and really loved it...Thanks man
@engenglish610
@engenglish610 3 года назад
Thanks @Sean Matheson, we can use a tool to debug "easy-peasy" like redux Dev tools ?
@rahulsriram6295
@rahulsriram6295 3 года назад
@@engenglish610 You can use the redux Dev tool itself, cz easy-peasy is just an abstraction layer over redux and thunks
@codingfun1285
@codingfun1285 5 лет назад
Brilliant, concise, thanks Ben. 👌👌
@t0digital
@t0digital 2 года назад
Cool demo. Thank you! That answered on my question. Love youtube for this, one query in search and answer in the first video:)
@eleah2665
@eleah2665 5 лет назад
Hello Ben, you keep talking about things I am interested in - state management and minimizing rerenders. Thanks.
@indiejoseph
@indiejoseph 5 лет назад
The Re-render problem isn’t a big deal, you could extract those children as standalone components and pass them a context as props, so that whenever context changes, and their props keep identical, they wouldn’t rerender
@bawad
@bawad 5 лет назад
yeah you can setup things where the rerender isn't a big deal for context, but in some scenarios is simpler to use a state management lib
@sumanth3036
@sumanth3036 4 года назад
Thanks @Joseph. Hey Ben, can you make a video how to do this?
@wayneswildworld
@wayneswildworld 2 года назад
@@bawad What font are you using in this video? I want it!!!
@marcusaureliusregulus2833
@marcusaureliusregulus2833 Год назад
Hi guys. Can you please give your opinions on whether to use redux or context for a cart? App is a order management system where users place orders for multiple products. ( Retailers ordering from distributors )
@marcola47
@marcola47 Год назад
The problem is when you have other states inside children of a context provider, every time the context state changes, everything inside the provider gets re-rendered and the internal states go back to their default value. Let's say you have a state that manages if a kebab menu should be open and the state is set to true as default, every time you update the state provided, assuming this menu state is inside a component that is a child of the provider, it will always be set to true, so, every action you make that changes the provided state will open the menu because it will re-render the entire component tree and set everything to their default values. That applies if you make a [count, setCount] state inside a provider, whenever you update the provided state, the count state will reset.
@CesarGonzalez-np2oe
@CesarGonzalez-np2oe 5 лет назад
Thanks for the vid! Just starting to learn React and now I'm learning about Redux I'd have the points you made on the video in mind
@karldtrumpeter
@karldtrumpeter 2 года назад
Thank you, this really helps.
@qwerduro
@qwerduro 2 года назад
Simply delivered… keep it up
@engenglish610
@engenglish610 3 года назад
Thanks @Ben Awad, it's possible to use multiple contexts to deal the presented issue (rendering) ?
@darudeSandstorm.
@darudeSandstorm. 10 месяцев назад
Very well explained 😊
@namanjindal1399
@namanjindal1399 2 года назад
Simple and to the point!
@GhumioDeveloper
@GhumioDeveloper Месяц назад
Very informative and helpful
@fC-dy4xu
@fC-dy4xu 5 лет назад
Had an argument over this, and I didn't know memoize couldn't work. Multiple contexts is what I've been doing lately, and it suffices so far. Good to know there's still a use case for state management libraries, but I hope react can do something to their core library to solve this re render problem so I wouldn't need to bring in a library
@EverAfterBreak2
@EverAfterBreak2 3 года назад
I know im 1 year late but they already offered a solution, check the useContext docs
@AngryBeaver999
@AngryBeaver999 3 года назад
Can I get the data inside Likes component without using provider? I mean I would like to get "likes" data in Navbar component, If i call I will also render updated data there? Should I use some kind of consumer? I am not sure
@ma-tei
@ma-tei 5 лет назад
Interesting thing to look at for global state is 'reactn' library, it support hooks as well as classes and is way cleaner than Redux or MobX
@IvanKleshnin
@IvanKleshnin 5 лет назад
Did you try SSR with ReactN?
@ma-tei
@ma-tei 5 лет назад
@@IvanKleshnin no Ivan, just on some mobile projects
@softmfq
@softmfq 4 года назад
So we can say Context API is good to static data in to your application but state management libraries you can keep and also update your application state out of box. One comment we can also replace react context API with plan JS object which we can Import it to our application wherever we want
@JonesDTaylor
@JonesDTaylor 4 года назад
So basically, context API does not have an extension like the reselect library for redux that allows you to compute and re-ender only the state fields that changed (aka memoized selectors).
@bawad
@bawad 4 года назад
Yeah
@paulocbbf
@paulocbbf 4 года назад
Younes Your question cleared my doubts as I use reselect in a fundamental part of my RN app, thank you so much!
@juancamiloq1
@juancamiloq1 5 лет назад
Awesome.
@kbutube
@kbutube Год назад
Cool use of refs here for tracking re-renders!
@IamAWESOME3980
@IamAWESOME3980 3 года назад
Can't you just use life cycle method like should components update to prevent unneccesary rerendering?
@kidobv8468
@kidobv8468 Год назад
Thanks!
@nicken86
@nicken86 5 лет назад
Would breaking it down to multiple contexts be a viable solution?
@bawad
@bawad 5 лет назад
it can be depending on the situation
@030426101993
@030426101993 2 года назад
Well explainatio
@worldclasscode1847
@worldclasscode1847 2 года назад
Great video! But where is the source code?
@AR-yr5ov
@AR-yr5ov 2 года назад
420k subs nice.
@rayvincentdelacruz8251
@rayvincentdelacruz8251 4 года назад
Hello Ben please help, I am wondering why this code is not working? state = { todos: [...state.todos, payload], flashMsg: { type: "success", msg: "Sweet! Successfully added todo" } }; but this code works state.todos = [...state.todos, payload]; state.flashMsg = { type: "success", msg: "Sweet! Successfully added todo" } I just don't like using this way
@bawad
@bawad 4 года назад
both are bad you should be calling setState
@robertshawnmitchell
@robertshawnmitchell 5 лет назад
What about useReducer() ?
@tkdevlop
@tkdevlop 5 лет назад
useReducers can only be used in it's own component or pass down as props therefore it cannot be consume as context in any child component. PS - pls correct me if I miss something
@7833497
@7833497 5 лет назад
@@tkdevlop Technically you can pass usereducer reducer as context with both state and all actions you can perform, but i'm not sure how it would click in the end
@bawad
@bawad 5 лет назад
useReducer is great for local state for state across multiple components, you can combine it with context but you'll run into the same problem
@zes7215
@zes7215 7 месяцев назад
no such thing as have tox or etc or more or costx or lx or not etc, outx, can outx infix etc any nwm s perfx
@sunclaude
@sunclaude 3 года назад
In my opinion: Redux is a smelly imitation of Dependency Injection where the state has been made more abstract. This adds a tree of garbage classes to Your project (still readable but garbage). Using it it's like inverting binary trees at google.
@sh_zik
@sh_zik 5 лет назад
checkout "effector", u will be glad.
@cancer10in
@cancer10in 4 года назад
Can someone please add a tldr of this video?
@unlimitself
@unlimitself 5 лет назад
Open to trying Svelte?
@IvanKleshnin
@IvanKleshnin 5 лет назад
It won't beat React because of the ecosystem. It's too late in 2019 to enter the framework battle. I personally wouldn't waste time to learn another "promising" framework. There are better topics to spend your time on.
@bawad
@bawad 5 лет назад
I tried the getting started and it was pretty cool, but I'm not ready to switch from react
@unlimitself
@unlimitself 5 лет назад
@@bawad I am in the same situation. I like the React (everything JS) concept. I don't want to learn a new templating standard. I wish React introduces some kind of precompilation to avoid larger size bundle etc. But we have to realize that there is no Status Quo in our world. A new better one will always replace an old less good one.
@unlimitself
@unlimitself 5 лет назад
@@bawad Check this out ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-AdNJ3fydeao.html
@unlimitself
@unlimitself 5 лет назад
@@IvanKleshnin Check this out ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-AdNJ3fydeao.html
@myworldbox
@myworldbox Год назад
you dont need redux, usereducer can do anything if you truly understand it
@alex_chugaev
@alex_chugaev 3 года назад
useAngular
@JaviGomez
@JaviGomez 4 года назад
Simple: Use Context sparingly. Don’t use redux ever. If you need globals in any program they have to be necessary. GLOBALS ARE BAD. If you need something more than React hooks for state you are doing something wrong. If you need to pass context down to deep sub children - rewrite your code it’s too complicated. I think traveling outside of JS land can be helpful for React devs.
@rohandevaki4349
@rohandevaki4349 3 года назад
you could have shown using redux , but you used "easy-peasy", why?, the title of the video itself is redux vs context, you should have really shown redux and useContext, this is not good bro.
@user-bm6xs6ih5n
@user-bm6xs6ih5n 3 года назад
easy-peasy is Redux with an abstraction layer...
@boyswillbeboys6177
@boyswillbeboys6177 3 года назад
so, using context is bad if you are creating game or some sort, where you can spam buttons and data were stored locally? Coz in most web applications with separate frontend, it usually waits a response from api at the backend on every requests.
Далее
React Hooks useContext Tutorial (Storing a User)
11:38
Просмотров 357 тыс.
Should you still be using Redux in 2023?
7:35
Просмотров 52 тыс.
ВОТ ЧТО МЫ КУПИЛИ НА ALIEXPRESS
09:35
Просмотров 738 тыс.
Don't Use React Context!! Use This instead
13:34
Просмотров 27 тыс.
Making React Context FAST!
33:34
Просмотров 86 тыс.
React Hooks Closure Problems
7:21
Просмотров 24 тыс.
Premature Optimization
12:39
Просмотров 776 тыс.
Learn useRef in 11 Minutes
10:20
Просмотров 627 тыс.
React Typescript Tutorial
23:33
Просмотров 574 тыс.
Git Tutorial For Dummies
19:25
Просмотров 1 млн
Крупный ПРОВАЛ Samsung
0:48
Просмотров 673 тыс.
Telefonu Parçaladım!😱
0:16
Просмотров 26 млн
iPhone, Galaxy или Pixel? 😎
0:16
Просмотров 1,3 млн