Redux or Context in React

[@SeanMatheson]

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]

Hi.....Even I have used Easy Peasy and really loved it...Thanks man

[@engenglish610]

Thanks @Sean Matheson, we can use a tool to debug "easy-peasy" like redux Dev tools ?

[@rahulsriram6295]

@@engenglish610 You can use the redux Dev tool itself, cz easy-peasy is just an abstraction layer over redux and thunks

[@kidobv8468]

Thanks!

[@t0digital]

Cool demo. Thank you! That answered on my question. Love youtube for this, one query in search and answer in the first video:)

[@eleah2665]

Hello Ben, you keep talking about things I am interested in - state management and minimizing rerenders. Thanks.

[@indiejoseph]

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]

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]

Thanks @Joseph. Hey Ben, can you make a video how to do this?

[@wayneswildworld]

@@bawad What font are you using in this video? I want it!!!

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

[@marcola4767]

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.

[@codingfun1285]

Brilliant, concise, thanks Ben. 👌👌

[@fC-dy4xu]

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]

I know im 1 year late but they already offered a solution, check the useContext docs

[@GhumioDeveloper]

Very informative and helpful

[@darudeSandstorm.]

Very well explained 😊

[@softmfq]

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]

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]

Yeah

[@paulocbbf]

Younes Your question cleared my doubts as I use reselect in a fundamental part of my RN app, thank you so much!

[@karldtrumpeter]

Thank you, this really helps.

[@matej-world]

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]

Did you try SSR with ReactN?

[@matej-world]

@@IvanKleshnin no Ivan, just on some mobile projects

[@CesarGonzalez-np2oe]

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

[@kbutube]

Cool use of refs here for tracking re-renders!

[@qwerduro]

Simply delivered… keep it up

[@namanjindal1399]

Simple and to the point!

[@worldclasscode1847]

Great video! But where is the source code?

[@juancamiloq1]

Awesome.

[@boyswillbeboys6177]

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.

[@engenglish610]

Thanks @Ben Awad, it's possible to use multiple contexts to deal the presented issue (rendering) ?

[@robertshawnmitchell]

What about useReducer() ?

[@tkdevlop]

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]

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

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

[@nicken86]

Would breaking it down to multiple contexts be a viable solution?

[@bawad]

it can be depending on the situation

[@AngryBeaver999]

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

[@sunclaude]

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.

[@IamAWESOME3980]

Can't you just use life cycle method like should components update to prevent unneccesary rerendering?

[@AR-yr5ov]

420k subs nice.

[@rayvincentdelacruz8251]

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]

both are bad you should be calling setState

[@JaviGomez]

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.

[@zes7215]

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

[@myworldbox]

you dont need redux, usereducer can do anything if you truly understand it

[@Bread-vk8fl]

So basically CONTEXT will re-render the component even if its not used. With REDUX it doesn't happen.

[@unlimitself]

Open to trying Svelte?

[@IvanKleshnin]

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]

I tried the getting started and it was pretty cool, but I'm not ready to switch from react

[@unlimitself]

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

@@bawad Check this out kzbin.info/www/bejne/d5Wxe2acrsmYl9E

[@unlimitself]

@@IvanKleshnin Check this out kzbin.info/www/bejne/d5Wxe2acrsmYl9E

[@sh_zik]

checkout "effector", u will be glad.

[@alex_chugaev]

useAngular

[@cancer10in]

Can someone please add a tldr of this video?

[@rohandevaki4349]

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.

[@H3000-v7i]

easy-peasy is Redux with an abstraction layer...