Redux or Context in React

I explain when I like to use a state management library like Redux vs. regular Context in React.

----

----

----

----
Follow Me Online Here:

#benawad
​
----
#benawad

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

[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

[eleah]

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

[fC-dyxu]

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

[tdigital]

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

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

[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

[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

[CesarGonzalez-npoe]

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!

[engenglish]

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

[boyswillbeboys]

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.

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

[AngryBeaver]

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 <Likes/> I will also render updated data there? Should I use some kind of consumer? I am not sure

[nicken]

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

[Igor-vkfl]

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

[rayvincentdelacruz]

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

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

[worldclasscode]

Great video! But where is the source code?

[IamAWESOME]

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