This was the perfect walkthrough for someone like me who got used to working with Redux, took a pause on doing React apps for a few years, and needed a refresher on how state works more or less today. Chances are I would’ve made the same coding bugs while learning.
Some days ago I started to work on a new project that specifically requests the use of Context API and, coming from traditional way of doing React things, I was starting to get crazy trying to figure out how all those Provider - Consumer stuff works... Finally I got it clear with this video! Great explanation! Thank you so much!
I understand just about everything, and then when I tried implementing into my project, I was suddenly mentally paralyzed and lost lol. Will watch this 10 more times
"That's because I don't know how to do code." was the best line. I applaud you for keeping that in there, it's a great reminder to new and experienced programmers that we all make mistakes, even experts.
Watching this makes me appreciate Vue that much more. I thought I’d be a die hard React fanboy but Vue just makes it so much more simple. Not a fan of this new API at all. But nonetheless thanks for taking the time to learn it.
100%. I came to the comments to say the same. Provide/inject blows this out of the water. What a goddamn nightmare... People do this day in and day out? What a miserable existence...
Good explanation! One note: because of asynchrony of React when we need to set the next state using the previous state it's safer to pass a callback function to setState (prevState) => ({...nextState}) instead of simple object.
Great video, just a small comment on updating the age. I guess using the old state value to update the state could introduce bugs. It should be done this way: this.setState(previousState => { return { age: previousState.age + 1 } })
Great video! Just wanted to mention @1:26 you said "export that application here" and made a gesture with the mouse to suggest that "export default App" was needed to render your App.js, which is not the case. You could have not had "export default App" at all and it would have run the same.
Thanks Bos for teaching Context in such a simple and easy way. I got it in first watch. I have been listening your syntax from a long time, but this is the first time I watched your video . Sorry for that ; )
I'm guessing I'm probably not the first to say this... You're a boss. Thank you for a very valuable video that I'm sure I'll be coming back to in the future. Have a blessed day. :)
Hey Wes, this was simple, straight to the point and very well made! I just bought the course you have on react because of this video and will delve into it this weekend. Thanks a lot for the content!
Maybe things have changed in the last two years or I'm in a slightly different initial state somehow, but mine would render blank until I wrapped the fragment in a 'return'. Thanks for putting this together, it was very helpful! *subscribes*
Thanks for simply yet clearly explaining the subject matter. Read a blog but I could understand the idea of the Provider, Consumer and Context in the actual application. With this, I'm throwing the props drilling technique. ^_^
This video was amazing! Wes you did a great job explaining these concepts. I am just learning React and by watching your video, it not only helped me understand context a bit more, but also how react is used in the real world.
I am new to react, with the Java background. The new context is awesome what was looking for to be able to create a scalable application. The good thing about this API is the encapsulation and let us write reusable code.
Nice presentation, Wes, I really like your style. There are two questions I've seen repeated in the comments which are extremely relevant when working on an actual app, which have yet to be addressed as far as I can see: 1) What is a recommended way to pass context to components when components are not defined within the same file? 2) How do we access & examine context data (i.e. loop over an object) inside of a child component method? Cheers!
At first sight I though to myself that this method will add more clutter. And in fact It does introduce complexities to the code (Harder to resuse and more code to maintain) However, in the long run it's easier to maintain contexts than maintaining your own code for that. (If you can't avoid using a global state). I personally will try to stick to composition and pass down values. If you build your components well, you won't have to pass too many values. Good video!
Wes, this is awesome as always, you make things so easy to understand. SO this context thing looks so so so much cleaner than passing down props. Thanks for the video =)
Always brilliant at 💩viding quick and easy to understand tutorials. 👍 keep up the great work. Really looking forward to your graphql course. Even though I’m already using it in projects, keen to see your best practice’s .
Good know. Thanks for the little demo. I think it is very similar to redux the way it handles the data storage globally but it lacks of the single direction of data flow which I think it is cleaner and more important to larger applications.
I see a couple of MobX fans in here. I would like to see a demonstration/comparison of it by you, Wes. I really enjoy your videos and concept explanation/examples.
Very helpful video, thanks. I have a few questions: 1. what is the font you are using in vs code? 2. I noticed that when you type a '.' , then it pops up a tag with the className in it, how did you do that? 3.The emoji input is fantastic, would you mind sharing how did you make it in vs code?
Dude I didn't know your channel but you've got a perfect way of explaining things. Thanks for this, I'll have to try it out, I did use Redux for these issues ;)
This definitely was needed for React, although I just coded my first context and there is a lot of boilerplate code and you still have to make sure at the top level the provider is defined. I am wondering if having a bunch of providers or consolidating into a single app provider is better, I am not sure which is the best way to go yet. I guess I just wish it was a little simpler like just calling for the context and don't have to worry if it has been included at a higher level.
Wow Wes. Thanks so much. You’ve demo’d me new stuff I can leverage in my project. This is gold. P.S. I really enjoy your podcast Syntax, as well. Keep it up, man; you’re improving people’s life and work.
For me, the application would have to be pretty small for me to use this over Redux. I would argue Redux really isn't that difficult, nor is it all that heavy. It does have a bit of a learning curve, though, which some devs don't like and that's fine. To each, their own. Personally, I like the clarity in how the data flows in Redux much better than this new context library. It feels kind of...unfinished...which it probably is (to a degree). The other thing is, is a library abstracting this pattern any better than Redux? I'm not so sure.
You're installing an alpha version of React to get it and they say on their site that anything written with it right now is likely to break with future versions of React. Might be why it looks unfinished haha
Forms (which needs data to be persisted across tabs etc.) will be easier to make now as you don't have to store all your data to redux. But Redux is beautiful :)
Man this was clear as day. Good Stuff...still struggling to know why this is better than redux though. Is it because its pure react and doesn't come with the overhead.
Great video Wes. I love the way you made it truly a quick crash course type of video. For beginners into React, this is not necessarily for you. But if you catch things quickly you might be ok. In regards to what Alex said, will this really replace Redux? I suppose it still will allow time travel. It's certainly much simpler than Redux on this cursor review. Thanks again Wes.
Yeah, definitely looks like it's got a long way to go to replace Redux. I can't see myself using this directly; if an application is small enough that I don't want to implement Redux, it'd also be small enough to just keep the state in the components. I imagine there's value here for library creators, and it'll probably improve with iterations, but this looks like way more work than Redux. Plus, what would I replace redux-first-router with if I switched to Context API? No thanks!
Keep application-wide data into the redux store and use the context API to replace "prop drilling" for stuff that do not need to live on the top level but also aren't consumed by immediate children.
This is incredible! I've been hearing a lot about the Context API but now I understand it's true value and how to make use of it. Thanks for this awesome video.
For those new to context API and comparing it with redux. React-redux already uses 'context api' since its inception. redux alone is more like pub-sub mechnism and is independent of react. So redux will never use context api. Besides context api got finalized recently, but a hush-hush! use at your own risk!! version of it has been around for quite sometime. However react-redux or mobx might become more lightweight if they start to use some of the new features of this context api. I feel code splitting per component as independent reducers and combineReducers some plugin around redux thunk etc might still be reasonable. However solidified context api is a welcome change. Also the concept of passing actions is quite nice, and for smaller projects it is a nice alternative than full blown redux.
You are doing a great job man. tomorrow onwards I am gonna use this API for my current project. If I stuck anywhere will ping you. Thank you so for your valuable video.
5:41 => createContext
6:32 => context provider
9:50 => context consumer
12:16 => React.Fragment
thanks!
honestly its the most 15 min effective learning of context API Learning
Wes you continue to bring value through your content. Keep it up man!
This was the perfect walkthrough for someone like me who got used to working with Redux, took a pause on doing React apps for a few years, and needed a refresher on how state works more or less today. Chances are I would’ve made the same coding bugs while learning.
By Far the greatest tutorial on React Context. Thanks man
best 15 mins spent on learning context API or react in general. Keep making such simplified videos. THUMBS UP!
9:32 render prop. This is an example why I love this video so much- Wes talks about 2 ways to implement render prop, because "hi, why not". Excellent!
pretty decent video, it was really easy to understand, thanks, buddy...
Some days ago I started to work on a new project that specifically requests the use of Context API and, coming from traditional way of doing React things, I was starting to get crazy trying to figure out how all those Provider - Consumer stuff works... Finally I got it clear with this video! Great explanation! Thank you so much!
Best part of the video: "It's 'cause I don't know how to do code."
I understand just about everything, and then when I tried implementing into my project, I was suddenly mentally paralyzed and lost lol. Will watch this 10 more times
"That's because I don't know how to do code." was the best line. I applaud you for keeping that in there, it's a great reminder to new and experienced programmers that we all make mistakes, even experts.
Most helpful resource I've found for jumping into Context API. Thanks a bunch!
Watching this makes me appreciate Vue that much more. I thought I’d be a die hard React fanboy but Vue just makes it so much more simple.
Not a fan of this new API at all. But nonetheless thanks for taking the time to learn it.
100%. I came to the comments to say the same. Provide/inject blows this out of the water. What a goddamn nightmare... People do this day in and day out? What a miserable existence...
Good explanation!
One note: because of asynchrony of React when we need to set the next state using the previous state it's safer to pass a callback function to setState (prevState) => ({...nextState}) instead of simple object.
Great video, just a small comment on updating the age. I guess using the old state value to update the state could introduce bugs. It should be done this way: this.setState(previousState => {
return {
age: previousState.age + 1
}
})
Great video!
Just wanted to mention @1:26 you said "export that application here" and made a gesture with the mouse to suggest that "export default App" was needed to render your App.js, which is not the case. You could have not had "export default App" at all and it would have run the same.
Thanks Bos for teaching Context in such a simple and easy way. I got it in first watch. I have been listening your syntax from a long time, but this is the first time I watched your video . Sorry for that ; )
14:06 *"BOOM BOOM BOOM"* ... I love how you said it right there 😂 Thanks for this tutorial! Double thumbs 👍👍
Great tutorial! Our platform is frozen on 16.3 so I wasn't able to make use of hooks, this was a life saver
Wes, As an avid Syntax listener I had no idea you also made RUclips tutorials. Thank you very much. :)
This is the most effective tutorial i watched regarding context api, very straight forward and easy to understand. Keep it up man.
I don't usually write comments, but you're a real super hero among fake ones
Change your last name to Boss because you explain like a Boss!
I'm guessing I'm probably not the first to say this... You're a boss.
Thank you for a very valuable video that I'm sure I'll be coming back to in the future. Have a blessed day. :)
Hey Wes, this was simple, straight to the point and very well made! I just bought the course you have on react because of this video and will delve into it this weekend. Thanks a lot for the content!
Maybe things have changed in the last two years or I'm in a slightly different initial state somehow, but mine would render blank until I wrapped the fragment in a 'return'. Thanks for putting this together, it was very helpful! *subscribes*
Thanks for simply yet clearly explaining the subject matter. Read a blog but I could understand the idea of the Provider, Consumer and Context in the actual application. With this, I'm throwing the props drilling technique. ^_^
I don't know who you are, but I just subscribed. Great video! Simple, to the point.
This video came in clutch. I'm am needing to rewrite the some code in a project from out old developer and they did not use the context api correctly.
This video was amazing! Wes you did a great job explaining these concepts. I am just learning React and by watching your video, it not only helped me understand context a bit more, but also how react is used in the real world.
best JS teacher in the whole world 👍
I am new to react, with the Java background. The new context is awesome what was looking for to be able to create a scalable application. The good thing about this API is the encapsulation and let us write reusable code.
Nice presentation, Wes, I really like your style. There are two questions I've seen repeated in the comments which are extremely relevant when working on an actual app, which have yet to be addressed as far as I can see:
1) What is a recommended way to pass context to components when components are not defined within the same file?
2) How do we access & examine context data (i.e. loop over an object) inside of a child component method?
Cheers!
Great explanation, Wes!
This is the exact problem I used to have in `Polymer 1.x` before I moved away for Web Components. Very relatable.
I liked your explanation so much, that I subscribed instantly and like of course
You saved me from a massive headache. Thank you!
Best explanation I've seen or read so far. Awesome job.
Amazingly easy way to explain context in a nutshell. Cheers, mate!
At first sight I though to myself that this method will add more clutter.
And in fact It does introduce complexities to the code (Harder to resuse and more code to maintain)
However, in the long run it's easier to maintain contexts than maintaining your own code for that. (If you can't avoid using a global state).
I personally will try to stick to composition and pass down values.
If you build your components well, you won't have to pass too many values.
Good video!
Best explanation of Context API available on RUclips!
Great stuff, got contents for my next React Job interview. Thanks a lot !!
I like how simple and direct this tutorial was thank you
Wes, this is awesome as always, you make things so easy to understand. SO this context thing looks so so so much cleaner than passing down props. Thanks for the video =)
Always brilliant at 💩viding quick and easy to understand tutorials. 👍 keep up the great work. Really looking forward to your graphql course. Even though I’m already using it in projects, keen to see your best practice’s .
So clearly explained! Many thanks Wes!
Good know. Thanks for the little demo. I think it is very similar to redux the way it handles the data storage globally but it lacks of the single direction of data flow which I think it is cleaner and more important to larger applications.
Didn't know about context. This seems not only less work but much more intuitive than existing prop passing.
I see a couple of MobX fans in here. I would like to see a demonstration/comparison of it by you, Wes. I really enjoy your videos and concept explanation/examples.
Very helpful video, thanks. I have a few questions: 1. what is the font you are using in vs code? 2. I noticed that when you type a '.' , then it pops up a tag with the className in it, how did you do that? 3.The emoji input is fantastic, would you mind sharing how did you make it in vs code?
Thank you for the great, simple yet very informational video :)
Crystal clear explanation. Thanks Man!!
Dude I didn't know your channel but you've got a perfect way of explaining things. Thanks for this, I'll have to try it out, I did use Redux for these issues ;)
This video is so simple and well explained. You got yourself a subscribe my friend
Great explanation Wes, as always!
I still find MobX as the simplest solution
This definitely was needed for React, although I just coded my first context and there is a lot of boilerplate code and you still have to make sure at the top level the provider is defined. I am wondering if having a bunch of providers or consolidating into a single app provider is better, I am not sure which is the best way to go yet. I guess I just wish it was a little simpler like just calling for the context and don't have to worry if it has been included at a higher level.
Hi,Wes.Thanks for the videos.I learnt a lot from your channel.Could you share the theme you using in VS and what kind of font are you using?
I also would love to know!
Wow Wes. Thanks so much. You’ve demo’d me new stuff I can leverage in my project. This is gold.
P.S. I really enjoy your podcast Syntax, as well. Keep it up, man; you’re improving people’s life and work.
This is a Eureka moment for me! Thank you for this terrific well-explained video. I have subbed to you channel for more of such content.
Great video! What themes are you using for Terminal and VScode?
Short and simple, this was beautiful, thanks dude!
the best example I’ve seen so far.
This context API is useful, it can wrap the global state and it also defines the controller function to control the state
For me, the application would have to be pretty small for me to use this over Redux. I would argue Redux really isn't that difficult, nor is it all that heavy. It does have a bit of a learning curve, though, which some devs don't like and that's fine. To each, their own. Personally, I like the clarity in how the data flows in Redux much better than this new context library. It feels kind of...unfinished...which it probably is (to a degree). The other thing is, is a library abstracting this pattern any better than Redux? I'm not so sure.
You can use this : www.npmjs.com/package/react-waterfall
You're installing an alpha version of React to get it and they say on their site that anything written with it right now is likely to break with future versions of React. Might be why it looks unfinished haha
Agreed! Fingers crossed they clean it up a bit! I'm excited to see where it goes!
You always make it look so easy. Well done bro Bos
It is clear understand! Maybe it looks confused in advanced, but ok to use. I dont know what is better redux or context. Or more clear...
Very useful and resume video of Context API. With this and GraphQL Redux is done!
Substantial and very helpful. Thanks a lot for this video.
Sick. Another nail in the coffin for Redux! Although Redux Devtools and going back in time etc is still dope
Thanks for this amazing tutorial. GOD bless.
Excellent example.understood very well.thanks!
Thank you very much Wes to help me understand Context Api. Now, I'm free from redux in my current project.
Really like the simple example... thanks
Thanks Wes, I will be using this from now on
Nice. I had just been looking for a similar solution to my troubles when I came across this vid :) thanks!
Thank you, Wes. It is really helpful. Keep updating us like this.
Forms (which needs data to be persisted across tabs etc.) will be easier to make now as you don't have to store all your data to redux. But Redux is beautiful :)
Quick and excellent presentation.Keep it up, nice work.
very good explanation concepts ... easy to understand
Man this was clear as day. Good Stuff...still struggling to know why this is better than redux though. Is it because its pure react and doesn't come with the overhead.
Great video! Made it really easy to understand the concept.
Great video Wes. I love the way you made it truly a quick crash course type of video. For beginners into React, this is not necessarily for you. But if you catch things quickly you might be ok. In regards to what Alex said, will this really replace Redux? I suppose it still will allow time travel. It's certainly much simpler than Redux on this cursor review. Thanks again Wes.
thanks man, you just made it simple to comprehend...
Thanks for the quick how-to!
Thanks Wes, you made that very clear 👍👍
I honestly don’t see how this is easier or less messy than using redux seems it has the same anoint of steps for something that isn’t as scalable
Yeah, definitely looks like it's got a long way to go to replace Redux. I can't see myself using this directly; if an application is small enough that I don't want to implement Redux, it'd also be small enough to just keep the state in the components. I imagine there's value here for library creators, and it'll probably improve with iterations, but this looks like way more work than Redux. Plus, what would I replace redux-first-router with if I switched to Context API? No thanks!
Keep application-wide data into the redux store and use the context API to replace "prop drilling" for stuff that do not need to live on the top level but also aren't consumed by immediate children.
that sounds like a good idea
yeah, that's how i'm going to use it too
This would be a nightmare on a large app. Maintenance nightmare.
Wow this is so easy to learn and simple.
Thanks 😊 Your explanation was very clear
Great work Wes! Very well explained... Keep up the good work!!
This is incredible! I've been hearing a lot about the Context API but now I understand it's true value and how to make use of it. Thanks for this awesome video.
Hi! I like your terminal and VSCode theme very much! Could you tell me what themes are you using
Perfect explanation in perfect pace!!! 👍👍
You are the best!..Amazing video about React-Context..thank you..
_Finally it all makes sense_
Good explanation. I wonder sometimes what has happened to HTML when I see JS frameworks doing their own thing ;)
Nicely Explained and always to the point !!! Great Video.
so incredibly helpful, thanks!
This is such a great, simple example! Any chance you could also include how you'd unit test a component that relies on context?
presumably this'd be some kind of dependency injection, or actually you'd just test
For those new to context API and comparing it with redux. React-redux already uses 'context api' since its inception. redux alone is more like pub-sub mechnism and is independent of react. So redux will never use context api. Besides context api got finalized recently, but a hush-hush! use at your own risk!! version of it has been around for quite sometime. However react-redux or mobx might become more lightweight if they start to use some of the new features of this context api. I feel code splitting per component as independent reducers and combineReducers some plugin around redux thunk etc might still be reasonable. However solidified context api is a welcome change. Also the concept of passing actions is quite nice, and for smaller projects it is a nice alternative than full blown redux.
You are doing a great job man. tomorrow onwards I am gonna use this API for my current project. If I stuck anywhere will ping you.
Thank you so for your valuable video.