React Context vs Redux - Who wins?
HTML-код
- Опубликовано: 18 фев 2019
- Is the React Conext API a good replacement for Redux? And how would you switch?
Here's an example project and some reasons on why (not to) switch!
----------
Learn React (incl. Context API & Redux) from Scratch: acad.link/reactjs
Read the full article: academind.com/learn/react/red...
Starting Code: github.com/academind/react-re...
Finished Code: github.com/academind/react-re...
Want to learn something totally different? Check out all other courses: academind.com/learn/our-courses
----------
• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.( / academindchannel )
• Or visit our Website (www.academind.com) and subscribe to our newsletter!
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice! 
Наука
If you know what redux and Context are you can jump strait to 29:08.
Thanks.
thanks for the 29 minutes you gave me
Thanks for that. I feel like his answer is misleading because AFAIK, Redux was built on the old React context API - so presumably using the new context API should be more performant than Redux, but less performant than using state and passing values into nested components. For proof, see blob 8bc14659780c044baac1432845fe1e4ca5123a8d of Redux's connect.js
rofl
That should be in the first seconds of this video. I see a lot of people who don't understand and just skip the part where you should use context only for low-frequency changes, and just replace redux with context. Especially after useReducer came out. People think that context is basically new redux, but it is not
Thanks to keep me employed Max! You've done more for me than my University ❤️
Haha, that's amazing to hear! I'm glad you're liking the content!
I second that
I third(?) that
Wow! You won't believe I was just thinking about searching for Redux Vs Context when the notification popped out. Thank you so much! ❤️
Awesome to read that the timing was right for you Siddhant, thank you for your comment!
Google knows everything. that happens to us
Summary: If your application has high-frequency updates (like updating dashboard with data pulled from the server) then use redux, if your app has low-frequency updates (like changing user avatar, password, or login) then use context API.
Very nice video explaining the purposes and use cases for these two different tools! Thanks
Good video. I'm disappointed that you didn't show how much simpler the context API is when you use functional components and the useContext hook. To me, that might actually be its biggest advantage at this point.
That is coming! I already created a video on that :-)
@@academind Already waiting for that video! You make great content, as always
What if you need to hydrate your store? It has pros and cons, don't say one better than the other without knowing underlying issues and headaches. There is a lot more to that than just context api is less code let me pick that one...
@@academind do we have video on that
Thank you brother. I was about to use Context API in my next project, but will stick with redux as you mentioned.
1) react with class components and context api
2) react with functional components(hooks) and context api
3) react with class components and redux
-> These are the three options which he explains through three different videos
-> Depends up to you and your project requirements
Thank you for these videos really means a lot
hmmm. I personally would just create the provider where you create the context, with all of its methods that edit state inside the component, and then from that file export provider and consumer. That would let you avoid the global state problem you are creating.
Also, I would put the functions into the state instead of creating a new object every time inside of the providers value, that will cause the component to re-render too often.
Interesting, thanks for such a detailed comparison. While it may be more boilerplate, I feel like redux provides additional organizational and decoupling benefits. I feel that Contexts tightly couple your child components to their component hierarchy, reducing their reusability in another app (which is arguably the entire reason for a "component" based model). Secondly, I don't like how business logic is moved into the presentation layer. I can definitely see how Contexts could be used for common properties needed by many components like locale, theme, etc. I do realize that all projects don't have to be architecturally "the best", so long as they serve the purpose. I can see how Contexts could work in smaller applications where component reusability isn't a big concern.
Once again, thanks for the explanation!
yea i don't get why this comparison is made using a simple example. The whole point of Redux is managing complex applications. This video is like doing a test of IBM mainframe by showing us how to use it to play minecraft. That's just not what it's for.
Thank you for providing clarity. Much appreciated.
Thank you for the video, Max! As always - awesome
Very well done, well explained, didn't miss a beat! THANK YOU!!!
Thank you for this Max!
Thanks for this video! Just what I was looking for!
Might be a noob question, i'm wondering if it might be convenient when building up the state object in the Provider, why not have useState for the products added in from what would be the destructured object say [product,setProducts] we get from the useState(productCollection). Any down side to this? As mentioned still learning React and not sue when i tried doing this (easy i didn't have something setup correctly) but was getting errors something to the effect "Can user hook methods within other hook methods". If it makes sense and fine then i'll try working through my fat fingered errors...
Thanks in advance :)
"its not so much about the UI but the functionality" -Every coder in existence
Great tutorial. I wached a number of tutorials on this subject and this is the best. I recommend everyone should follow this channel if you want some serious information!
hi thank you for this video, I am still wondering why do we need to import (the context) in the consumer component, why it's not enough to use the value we passed from the provider to the consumer?
I personally like the video and I find it more helpful to understand Redux.
Bravo 👏👏👏
Can you make a comparaison between Redux and Mobx please?
Thanks!
I was really looking forward to having this from you Of Course!
mate, the quality of these videos are absolutely fantastic, thanks!!
Awesome to read that, thanks a lot for your great feedback!
I wish they implement one of the react rfcs' in the proposals for like setting the values to global context or something, its gonna be great if they do it, would be an official api and then we could have libraries add more on top of that.
Do i understand right what chenges in context not triggering rerender? We changing context in mutations manner? It behave as class with static fields and methods. (im using TS)
Thanks for this video, so many doubts are clear now.
Thanks for this great video Max. On the reasons to still consider redux you mention "high frequency updates". There is, IMO, another reason that is related to the additioal libraries that work with redux, such as redux-persist. With redux-persist it is straightforward to persist your reducers in the local storage, which is a popular requirement. It is possible by using the Context API?
Hi Max, do you have any videos for typescript with react and webpack?
28:40 - TLDR - Summary on React Context vs Redux.
well explained! thank you so much
I don't like how using context.provider on the App component re-renders the whole app every time the context was changed.
"use multiple contexts" is what I usually hear, however I find using multiple contexts very cumbersome.
What are your thoughts?
same thing with redux... context api is not meant to be used like in this simplified example, you shouldn't wrap entire router with your providers unless it is something global like "AppContext" or "I18nContext" which needs to re-render entire app, i hope you understand what i mean without over explaining.
@@efreitorhabibulin238 I prefer to go the masochist route and instead re-render every component that needs the i18n ;)
Which one should I use now 2022 mobx recoil or redux?
hey Max, thanks for your effort for our learning.
I have a request. Can you please make a video on how to design a solution for a project before start coding? It may be on OOP or anything you wish.
These guys hardly know the answer otherwise they would never write such a mess.
Can anyone tell me what are the changes I have to make in index.js if I am converting the app from redux to context api. Also can I completely remove action and reducer file ?
Could you please make a tutorial how can we implement multiple context ?
I love the product list :D
I think I fell in love with Context.
Developers have a hard time making up their mind.
excellent tutorial as always !!!
this Context idea reminds me a lot of the Emberjs mantra "data down, actions up". It's nice how they abstract a whole lot of boilerplate from the dev.
Thank u for this awesome video
Thank you ^^
Answer is simple use contexts. Redux is unnecessarily complex for such simple actions and whenever you dispatch an action it notifies all the reducers so this is causing too many side effects when the project is becoming complex. And after a while you are becoming choking between the actions. But contexts are super suitable to solve the problems in their own contexts i.e when you need to connect between menu items you can create menu context and solve everything around it. And if you need more interactions create context to combine contexts and solve all interactions on place. This is basically much suitable divide and concur principle.
you just made context sound more complex.
@@rajjyotidoley5087 Haha depends on your intelligence 😀
Thanks a lot Max!
Great example , easily to understand flow of context API
Great video. Is the difference between using "AppContext.Consumer" and "static contextType" is just syntax? If so, I might switch over to using "static contextType" because using the "AppContext.Consumer" wrapper is quite visually confusing to me.
just to highlight: we cannot list multiple contexts in "static contextType" but can do it utilizing "AppContext.Consumer" form
can u please update this video, how to do with functions instead of class
Hi Maximillian! Great explanation from great Max ! :))
Happy to read that you like it Rino, thank you!
I think there should have been comparison for bundle size as well for both usecases...
Great explanation sir... you've introduced me to Context API
Will you record the NgRx tutorial just like for the Redux?
Thanks a lot for this course. Please can you suggest me a course for SQL with React-Redux and Node JS. I would be thankful to you. :)
Hi, why should you use context instead of just passing down your state and update function as props? The prop could point to a update function in App which update its state.
Great video! I will try Context next, it seams much easier!
Because then you would have to pass props to children and then further children of the children , context give access to state from anywhere )
Thanks Max, very helpful
Happy to read that, thank you!
Still the same outlook on it? Since 6months have passed
Thank you Max. I want your videos about mobx!
Thank you for your comment, no plans to create videos on MobX in the near future though, sorry.
@@academind It's okay!
Can someone explain why you need the same *data* in both context/shop-context.js and the app.js with the exact same data? Why do we need in both places?
I was about to ask the same question...just a year later
This may be a silly question but when we pass this in bind, how come that addProductToCart is executed on correct object - GlobalState and not on this that is passed in bind. I assume that this in bind points to Product object?
I am not sure, but i think, that in this case, this is a reference for the context object.
Would be good to see this same sample implemented with hooks, useContext, even useReducer
Coming soon!
Hi Max what if I wanna use the context outside as a global state like axios interceptor how can i do that?
I created a context.js file where I stored the context. Then, I create the Component that provided the context and created functions that modify it and store those functions on the context.js file so you can edit it globally (you can do this also with state variables but I would't recommend it but depends on what kinsd of information)
Hi Max, can you make a series guide how to make a chat app with socketio, nodejs, react/vue as frontend, I mean a chat app can send private message to each other, or can create a group chat like facebook messenger, I 've read socketio documentation but it 's a bit vague, and lack of showcases. Thank you.
I'm also your student on Udemy.
thx a lot Max
what about mix contextapi with redux? example we store products in redux but user login or theme in contextapi, so it is smart to use both in same project?
That will make your code verbose and overly complex using two global states is not adviced
Amazing video. Thanks Max.
Happy to read that you like the video Waweru, thank you for your comment!
Awesome video as usual. Thank you.
Thank YOU for your support Gabriel!
Hi Max are you planing to update your React Native course in the near future ? The one from previous year is well outdated.
The course is not outdated, I constantly test the course and it is working fine with the current version, therefore I do not plan to update it in the near future.
Can context replace saga too?
Thanks a lot!
Can you please post videos about redux-ORM as we couldn't find videos any. If you post regarding that it could be useful.
I cannot get the idea behind putting navbar in every component. Needed check the GitHub code to understand it clearly
I still don't like it
Does anyone know what plugin for those gorgeous icons on the tree view???
Try material icons
I like the way he says “of course”
Hi Max. I noticed that you have increased your React content on RUclips and I was wondering if you are starting to like it more than Vue?
No, I still like all 3 frameworks/libraries. We just didn't have a lot of React content in the last months, that's why I wanted to release some videos on it, especially with big changes like the recent introduction of Hooks.
Regarding the last few minutes of the video on context/high frequency updates - I thought Redux also uses context behind the scenes. So wouldn't Redux face same issue? Unless Redux has some solution for this?
Is bundle size really your primary motivation here? Redux + asynchronous action is a) common and b) reliant on enhancers and middleware. Shouldn't standardisation and simplification be driving force?
what is point of setting default value when you instantiate context if we have to set default value on context component with using value?
It is just a set up to use the Context mechanism. He mentions that you don't need to provide a value, but it's easier since it'll provide you with auto complete info if you do n
@@jjjjjjjjwwjwjw thank you. I missed 7:00 part
you lost me in the final part :/
should i use it for ecommerce website like in your example or in an elearning website or should i keep using redux for that ?!
I was thinking to build a forum using context api sans hooks but now I'm also confused
Well, was watching this for the last 5 min, where he basically tells that you should use REDUX for high frequency updates and Context API for low frequency.
His advice is an appeal to authority. It's also almost 2 years old now. I will go out on a limb and say you aren't going to need Redux 95% of the time.
@@JohnSmith-bb1sv Well, after doing several projects on my own, I'd just suggest everyone to use MobX for everything. It is really that good, even for simple projects.
@@DavidSmith-ef4eh Awesome David, thanks. I will check that out. I started learning Redux because that's what job postings were asking for. It seems to me that there are many "best practices" which could lead to over-engineered apps. It makes more sense to start with useState, then very simple prop drilling, then move to useContext, then finally Redux - as the project grows in complexity. Personally I think that 90% of the work that gets done should be able to be completed by someone with 8 to 16 hours of experience in the platform - whatever it is. For example, functional React components are so simple anyone with basic Javascript ES6 skills can do them. Using Redux on a web page with a few components is overkill. Maybe for something like one of those online text editors like CodePen.
@@JohnSmith-bb1sv Well redux has it's advantages (being able to travel through history, saving application state to json..). But the cool thing in all of that, MobX can support similar functionalities with MobX-State-Tree package. I wouldn't discourage anyone from learning redux. Nothing wrong with learning different approaches.
I strive to be a super nerd like you guys. Luckily I'm getting a good grasp at Context and know what's coming with Redux now.
I got into a confusion over react context api.
If you can help , it will be really helpful.
Question : is it OK to use multiple independent context in react app.
Means those contexts will not be communicate between them , but they will exists in parallel .
Each context will handle multiple react routes ...
Route a1
Route a2
Route a3
Route b1
Route b2
Route b3
Fuck off....this is youtube
Nices Video wie immer!
PS: Man hört, dass du deutsch bist 😀
Finally who win ? Redux or Context ? please tell me.
Just use what ever you want... but contextAPI is easier right now with hooks. (useContext)
@@mucahittezcan4121 Not anymore. Redux simplified his bullshit boilerplate offering their own hooks and removing mapStateToProps or connect() function
For me obviously Redux since it provides great tooling with timeline feature which I think is necessary for larger companies, but I understand people using Context in much simpler and smaller projects
I see one major problem with React Context. Its performance.
By default all components connected to Context are rerendered, thus optimalization isn't as easy as in Redux.
Redux splitting business logic by default is also a nice thing.
@Academind What do you think about this? In your example, you wrapped your Provider around the BrowserRouter. Is that the only way to go? Will you constantly re-render components because of Context updates?
hi Max, if we would perform a code refactoring of our GraphQL/React tutorial, how to access token stored in GlobalState to manage our routing
{this.state.token && }
... etc
Paused at around 11 minutes here...racking my brain as to why duplicate the App state information with the context information?!?!?! What's the point then?
Is there a way for App to pull in the context data without having to copy and paste like that?
thx for the video, what about useContext + useReducer ? may this combination replace Redux
I think it works great if your state is not an object, since react will re-render every component that uses the context, when context changes. So each time you change the object, it will re-render even the components that use a property of the object (state) that didn't even change. Maybe there are some solutions for this re-rendering problem besides using redux... Maybe future versions of react will handle this better..
@@DavidSmith-ef4eh thought re-render problem can be handled with useEffect() method
@@octr9k we'll see, I'll let other people think about it and once they come up with a solution I might adapt it...
Amazing Video!
Hello, i really dont like the contexte api if Somme composent need to cummunicate i do a state lifting in the first common parent.
Also redux have the push subscribe pattern (push the action subscribe to state changes) I find it more intuitive
Hi Max, please make a video about Hooks in React 16.8.
This might be interesting for you => academind.com/learn/react/react-hooks-introduction/
@@academind Yes, it is. Thanks!
@@valentynrubliuk4290 damn... ask and you shall receive?
@@Gigusx Yeap :)
@@valentynrubliuk4290 he has got it in video lessons as a part of his react guide on udemy
What's the point of using both Redux and Context in the same app?
All of these discussions IMO are too focused on API and performance. When one of the major benefits of redux is keeping an overview of operations that can manipulate the state as well as being able to debug state changes easily through its devtools. I find that handy even for small apps and for large apps an essential piece to improve maintainability.
I am actually a novice and I have just completed the ReactJS and ReactJS-Redux basics of Academind just today (seriously). In my opinion, I agree with your view. Being a developer in my career who focuses more on debugging, I would prefer to use all the tools that will help me debug my code properly. Code readability is always a second priority in my opinion. This comment needs to be up there.
Awesome! But what about Mobx?
I don't get why it's Colt Steele that gets the cult following. I mean, I like the man and his content but this is on a whole another level. I've just finished Max's React course and still keep coming back for more!
I think Colt also has great courses, but I'm very happy with the support I get and with awesome feedback like yours, thanks a lot for that!
Context API for me, it can be used for about 90% of the cases that people tend to use Redux for and Redux is honestly a mess and you have to jump through so many hoops to get thing working. It doesn't strikes me as very future proof (React Native Navigation isn't going to be supporting it soon). With Context API and Hooks along with the rest React provides out of the box Redux kind of feels Redundant.
Redux is a mess? Really?
You can use React Navigation and it works very well with redux. I think redux is more flexible than Context API
I also like Redux more.
really? have you worked on any big projects?
@@pigvodoi Rather use MobX for those
How to get these colorful icons in VS Code?
Just install the Material Icons Theme => academind.com/learn/web-dev/visual-studio-code-introduction/#our-visual-studio-code-setup
Hmmmm.... but React-Redux is based on Context anyway, isn't it? For really high frequency updates like storing keystrokes (your example at the end), I would use local/component state, not even Redux. Context and Redux are simply not mutually exclusive... in fact React-Redux is based on Context API. But I know this comparison is rather "React-Redux vs. Context", and in that regard, React-Redux simply adds the Redux benefits to the otherwise plain Context API. So your conclusion that Context API should not be used for high frequency state changes, wouldn't that also apply to React-Redux? I think I remember even Dan Abramov mentioning before that there are cases like that when local state is all that's needed instead of Redux. Am I missing something here? Great video as usual BTW, and same goes to your online courses which I used a bunch of.
“Awaiable”, how adorable.
dude you are amazing!
Are you mean that Context API is created to be a replacement of Redux but it is not ready yet to be used in all cases
I think we should avoid the third party packages as long as possible.
Use context along side redux / mobx.
@academind : how to create project structure for an application as big as Facebook. Like how to design redux, store, react-hook-forms, etc for such a heavy application.
@Academind Creating small project is ok. But how to do it for larger projects like a pro.