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
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
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
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.
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...
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.
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.
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.
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.
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.
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 :)
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.
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.
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?
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 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!
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!
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.
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.
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?
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.
Redux is built on React Context so think of Redux as context on steroids with nice redux dev tools. If you have a simple app use context, but if you expect your app to grow use Redux.
@@justsomeguy8385 Agreed. React decided to implement Context because it would make it easier to access high-level content, but more importantly, they added it to make using React easier. I don't think they would have implemented Context if they didn't think it could handle scaleable applications.
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)
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.
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?
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
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?
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.
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?
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
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?
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?
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!
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.
It's a shame that you didn't compare those two in terms of composability, scalability and maintainability, which is where they actually differ. Also, there is absolutely no problem with frequent updates to the context whatsoever. This example, which is even simpler than the traditional todo list is completely detached from reality. Arguably global variables are even simpler and less of a boilerplate and would make for an even simpler example. Are global variables the next big thing replacing both Redux and Context API? Well, you may give it a try and figure out for your selves. The problem with all these comparisons is that they measure the complexity by the boilerplate, which is an unlucky choice of metric. Redux is actually extremely simple which I think is its most valuable feature. It provides a set of simple rules and composition guidelines. If you just stick to those rules, Redux will take you safely very far. It is proven that you can build huge, complex and performant real-time applications with it (despite the fact that the data is delivered to the components by way of context in react-redux), and all that using only pure functions which are the simplest building block you can think of and which are extremely easy to test. You only need impure functions for side effects which are all pushed to the boundary of your app i.e. the middleware. Nothing beats Redux's simplicity, except maybe The ELM Architecture. But certainly not imperative updates to local state of context providers scattered all over the place interfering with each other.
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?
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?
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 ?
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.
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)
I prefer Context over Redux for pretty much all global state communication. I haven't found a use-case yet where i would use Redux over it. I think people who don't understand Context, or haven't used it and are used to Redux, are the only ones who play down Context.
Never used anything. Tried both. 100% prefer Redux. Decoupling, cleaner/orginized code. Also the key here is Performance. I tried some unit tests with 3 different projects. Redux won by a lot on all 3 of them without any extra optimizations.
@@ΣτάθηςΣταθόπουλος-σ7ρ Redux isn't clenaer code, and it's not decoupled any more than Context. Context is a hook, one line of code. "Redux won by a lot" sounds like BS to me.
You can use useContext + useReducer hooks to imitate redux. However, what I understand is, context may cause all the child components using it rerender everytime as it doesn't do any diffing on it's own. Redux use context under the hood as well, but it does a lot more optimization and shallow diffing to prevent everything from rerendering when not needed. So redux is not going away yet.
hh83917 this is what I was wondering about as well. Doesn't this have a huge negative of all children rerendering? Would love some clarification here since that makes it not a viable replacement. If I have to utilize shouldComponentUpdate in the children manually, that would also not be feasible n
Ji Park from what I’ve read, the easiest way is to put the stuff you want to pass to context provider in the component this.state, even the handler functions, and let react do the diffing for you.
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.
@@rui_mcf If you're interested I dug a bit and it seems like React-redux provides a lot of internal performance optimization and avoids common pitfalls that can happen when using Context. If you use Context without knowing exactly what you're doing you may end up re-rendering your entire tree at times. So yeah, that's the reason.
The universe must not want me to watch this video because I have restarted my browser already once to watch this and I'm going to have to do it again. Edit: tried 4 different times youtube is bugging right now.
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
@@academind I see you just look like him, anyway I've been following your channel lately, and you're one of the best out there, thank you for your great videos and tutorials It helps me a lot, I'm gonna take your node.js tutorial once I'm ready to dive into it :D
@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.
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..
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 ?!
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
Redux is being used as a cache library for remote state is kinda screwed up. Local state (like locale, theme, etc) can be managed by the context api and remote state (async state) can be managed by libraries like react-query. Redux is an overkill for most applications.
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
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
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
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
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.
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.
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.
Thank you brother. I was about to use Context API in my next project, but will stick with redux as you mentioned.
Developers have a hard time making up their mind.
"its not so much about the UI but the functionality" -Every coder in existence
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 😀
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 ;)
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 :)
I think I fell in love with Context.
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?
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.
28:40 - TLDR - Summary on React Context vs Redux.
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 you for the video, Max! As always - awesome
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
Thank you for this Max!
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?
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 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!
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!
Very nice video explaining the purposes and use cases for these two different tools! Thanks
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.
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.
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
mate, the quality of these videos are absolutely fantastic, thanks!!
Awesome to read that, thanks a lot for your great feedback!
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.
Redux is built on React Context so think of Redux as context on steroids with nice redux dev tools. If you have a simple app use context, but if you expect your app to grow use Redux.
There is no reason your app can't grow with just context. If you're worried about wrapper hell, then use hooks.
@@justsomeguy8385 Agreed. React decided to implement Context because it would make it easier to access high-level content, but more importantly, they added it to make using React easier. I don't think they would have implemented Context if they didn't think it could handle scaleable applications.
The reason App grows is redux
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)
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
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
Thanks for this video! Just what I was looking for!
Thank you for providing clarity. Much appreciated.
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?
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
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?
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.
Thanks!
I was really looking forward to having this from you Of Course!
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.
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?
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
Will you record the NgRx tutorial just like for the Redux?
“Awaiable”, how adorable.
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.
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?
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 )
Hi Max, do you have any videos for typescript with react and webpack?
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.
It's a shame that you didn't compare those two in terms of composability, scalability and maintainability, which is where they actually differ. Also, there is absolutely no problem with frequent updates to the context whatsoever. This example, which is even simpler than the traditional todo list is completely detached from reality. Arguably global variables are even simpler and less of a boilerplate and would make for an even simpler example. Are global variables the next big thing replacing both Redux and Context API? Well, you may give it a try and figure out for your selves. The problem with all these comparisons is that they measure the complexity by the boilerplate, which is an unlucky choice of metric. Redux is actually extremely simple which I think is its most valuable feature. It provides a set of simple rules and composition guidelines. If you just stick to those rules, Redux will take you safely very far. It is proven that you can build huge, complex and performant real-time applications with it (despite the fact that the data is delivered to the components by way of context in react-redux), and all that using only pure functions which are the simplest building block you can think of and which are extremely easy to test. You only need impure functions for side effects which are all pushed to the boundary of your app i.e. the middleware. Nothing beats Redux's simplicity, except maybe The ELM Architecture. But certainly not imperative updates to local state of context providers scattered all over the place interfering with each other.
Still the same outlook on it? Since 6months have passed
I like the way he says “of course”
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?
Which one should I use now 2022 mobx recoil or redux?
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
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
Very well done, well explained, didn't miss a beat! THANK YOU!!!
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 ?
Hi Max. I noticed that you have increased your React content on UA-cam 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.
redux hands down for big projects
no
I think there should have been comparison for bundle size as well for both usecases...
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)
I prefer Context over Redux for pretty much all global state communication. I haven't found a use-case yet where i would use Redux over it. I think people who don't understand Context, or haven't used it and are used to Redux, are the only ones who play down Context.
Never used anything. Tried both. 100% prefer Redux. Decoupling, cleaner/orginized code. Also the key here is Performance. I tried some unit tests with 3 different projects. Redux won by a lot on all 3 of them without any extra optimizations.
@@ΣτάθηςΣταθόπουλος-σ7ρ Redux isn't clenaer code, and it's not decoupled any more than Context. Context is a hook, one line of code. "Redux won by a lot" sounds like BS to me.
Great example , easily to understand flow of context API
You can use useContext + useReducer hooks to imitate redux. However, what I understand is, context may cause all the child components using it rerender everytime as it doesn't do any diffing on it's own. Redux use context under the hood as well, but it does a lot more optimization and shallow diffing to prevent everything from rerendering when not needed. So redux is not going away yet.
hh83917 this is what I was wondering about as well. Doesn't this have a huge negative of all children rerendering? Would love some clarification here since that makes it not a viable replacement.
If I have to utilize shouldComponentUpdate in the children manually, that would also not be feasible n
Ji Park from what I’ve read, the easiest way is to put the stuff you want to pass to context provider in the component this.state, even the handler functions, and let react do the diffing for you.
Can you please post videos about redux-ORM as we couldn't find videos any. If you post regarding that it could be useful.
Thanks for this video, so many doubts are clear now.
Would be good to see this same sample implemented with hooks, useContext, even useReducer
Coming soon!
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!
Could you please make a tutorial how can we implement multiple context ?
What's the point of using both Redux and Context in the same app?
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.
Hi Maximillian! Great explanation from great Max ! :))
Happy to read that you like it Rino, thank you!
Great explanation sir... you've introduced me to Context API
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. :)
in the past year, has the Context API been revised so that the final argument for not using Context everywhere has been nullified?
React-redux uses the context api for its Provider to work, how can that be faster than using the Context API alone?
David K Marshall I guess the only way to really tell is measuring performance with high frequency updates with redux / context api.
I was wondering exactly this as well
@@rui_mcf If you're interested I dug a bit and it seems like React-redux provides a lot of internal performance optimization and avoids common pitfalls that can happen when using Context. If you use Context without knowing exactly what you're doing you may end up re-rendering your entire tree at times. So yeah, that's the reason.
The universe must not want me to watch this video because I have restarted my browser already once to watch this and I'm going to have to do it again.
Edit: tried 4 different times youtube is bugging right now.
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
Can context replace saga too?
can u please update this video, how to do with functions instead of class
Hey max are you the one in the wix ads?
No, I'm not part of these ads ;)
@@academind I see you just look like him, anyway I've been following your channel lately, and you're one of the best out there, thank you for your great videos and tutorials It helps me a lot, I'm gonna take your node.js tutorial once I'm ready to dive into it :D
Does anyone know what plugin for those gorgeous icons on the tree view???
Try material icons
@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.
Nices Video wie immer!
PS: Man hört, dass du deutsch bist 😀
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...
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
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
I love the product list :D
Redux is being used as a cache library for remote state is kinda screwed up. Local state (like locale, theme, etc) can be managed by the context api and remote state (async state) can be managed by libraries like react-query. Redux is an overkill for most applications.
Context for simple apps, Redux for complex apps and to scale.
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
So... essentially the context api essentially currys a continuation??
When you start testing, you will regret had react context on board
lol good point
Why?
@@tonydanza4502 Redux has bundled tools you can use for testing. The timeline feature is valuable, especially in large projects.
How come? When used correctly, I have no issues writing tests for the context API
Isn't react-redux using context under the hood as well?
Thanks a lot Max!