Hey! I noticed that I've had some unintentional reverb on my latest videos. I will remove it for later ones 😃You should be able to hear what I say anyways and no, I'm not in a big airplane hangar recording 😄
Man, I don't have words to say how happy I am. I went through so many RUclips videos and blogs to undertand that but until now I was not able to get anything. Thanks a lot, you are great! Filipe from Brazil
This tutorial saved me from tons of work for my personal project. I had a lot of components that needed to share a single state but passing it as props and handlers were a pain. Thank you!
It's a great, very straightforward video. I picked it out of others because the title explained the whole concept of Context in React in precise and clear way and made right decision.
Thanks for the video! I have everything set up the same except I am accessing the new state in a different component. I was able to console.log state in Store.js to see that it is indeed updating when I click the button 'add to cart'. However, when I change routes by going to the Cart component, state is then re-initialized to "cart is empty". How can I persist the state so that it doesn't reset each time?
That’s up to you to decide. No right or wrong here. You can see the context provider as a container where you can pass anything you want to be accessible in you app
@@Weibenfalk I got that part, what I am referring to is in the Store.js I am trying to create another state, count, setCount to pass to the provider along with state, setState. I tried to do but this did not seem to work
Hmm that should work. If you access the correct elements in the array. I would use an object instead when you have multiple ones. It’s easier to access them then by it’s properties.
Thanks for the clear explanation! I've wrapped my App component in a context provider, and I can access the global state from the App component now. However, my App component has other components inside of it, and it seems like I can't access that state inside of them. Does this only work for direct children of the context provider?
@@Weibenfalk weird! I wonder what I'm doing wrong! I keep getting this error: Uncaught TypeError: Cannot destructure property 'openAbout' of 'Object(...)(...)' as it is undefined. So it thinks that the global state is undefined for some reason. It actually works when I wrap the child components in the context provider directly...It just doesn't like it when I wrap the parent component only.
@@xxulchikxx It's really hard to tell by this info. But the whole point with the context is that you should be able to wrap any component with a context and all the child components should be able to access the content. So if you wrap the App with the provider all the components from App and down should be able to access it.
@@xxulchikxx Im getting the same error! Did you ever find out what you were doing wrong? Assigning the object to my createContext worked export const Context = createContext([initialState]);
@@timothyosmond1799 yes, my issue was that I was using Three.js canvas, and that messes with the DOM somehow, so I had to use useContextBridge from react-three/drei to pass all that context down.
Question: one of the problems that Redux resolve is accessing only parts of the global state instead of the global state as a whole because here you could mistakenly use setState to change the WHOLE of the global state mistakenly. Now, I know that this is not Redux, but using a Context.Consumer wrapper component around the child component, you can then extract which variables of the component you can access. Wouldn't that be better to limit the access of this component to the state?
You can have multiple context and multiple states and place them on different levels in your app. So you don’t need to put everything in one large context that wraps the complete app
I was searching for this in the whole internet till i found your perfect example , you're great thank you. Just a question , is there a way to make this work if we are using CoolComponent as a class instead of a function
Hello. Can you help me please? I need to create 2-3 states inside my initialState and than I want to change them in my another component. How can i do this? If this is possible of course.
Hmmm really don’t know what you try to achieve here :) why do you want to create a state inside a state? I would go for creating 3 separate states instead ... if you need them in a context you can create multiple contexts instead. Or you can have an object with multiple state properties in one state. Just as it works with this.state in a class component
Hey! I noticed that I've had some unintentional reverb on my latest videos. I will remove it for later ones 😃You should be able to hear what I say anyways and no, I'm not in a big airplane hangar recording 😄
Man, I don't have words to say how happy I am. I went through so many RUclips videos and blogs to undertand that but until now I was not able to get anything. Thanks a lot, you are great!
Filipe from Brazil
@@FilipeRebollo Thanks! Makes me happy to read that it helped you.
nobody else on the entire internet, including the react docs shows how to use it correctly like this. you are a boss
Thanks ... I'm glad to read that it helped you.
This tutorial saved me from tons of work for my personal project. I had a lot of components that needed to share a single state but passing it as props and handlers were a pain. Thank you!
Glad to read that it helped :) thank you.
Maaaan, i have been confuse with Context Concept for a few days. and now i am good with it. Many Thanks
Finally found a tutorial that shows how to use contexts for something that isn’t just themes, hahah
Thank you so much!
DUDE! I cannot stress enough how helpful this tutorial was!!!! thank you!
Thanks. Glad it helped :)
Much needed video, Thanks for your help
Thanks for your support. Glad you like it! Spread the word ;)
It's a great, very straightforward video. I picked it out of others because the title explained the whole concept of Context in React in precise and clear way and made right decision.
Thanks! Glad it helped
You're so cool brother
After hours of trying to understand context hook now i get like butter
That's a pretty cool component. Edit: Also, fantastic tutorial. Way clearer than all the others I have watched so far!
Thanks! Great that you like it!
man, u r saving my life, thank you so much!
You helped me a ton! So straightforward. I really appreciate it. Thank you.
Thanks a lot for putting the time and the effort to explain this concept !!!
The double await had me 🤯😅 Great tutorial! Thanks a lot!
Yeah that can be tricky ;) thanks and thanks for your support :)
Tack! I'm pretty new to React and have been using only useState so far. Things get complex real fast and I guessed context was the next step needed.
Context is a must know in React if you're going to build bigger apps =)
Salute for the tuto....very nice and easy to follow.
This was very nicely explained. You have really good content on your channel!
Thanks
Better than docs, and I agree about useReducer too bulky. Yay
Nice video,I like how the flow of the work is.It makes you understand how useState with context works.
Thanks Man. It was a big help
I love you. I feel like I am the worst programmer in the world. Like really and you... you safe my life mate. Big up
Thank you so much sir . You are awesome ....
Thank you I was looking exactly for this tutorial. You saved me.
Great to hear! Thanks!
Thanks, bro Helpful for me!
Good job, you make context ez to understand, keep it up
Thanks
But the setState in the coolcomponent , does it change in the store also
super cool guy. great video. super clear and minimal
Hey .. thank you! I forgot to turn off the reverb on the voice on this one though =) haha
which font you use please tell ?
Thanks for the video! I have everything set up the same except I am accessing the new state in a different component.
I was able to console.log state in Store.js to see that it is indeed updating when I click the button 'add to cart'.
However, when I change routes by going to the Cart component, state is then re-initialized to "cart is empty". How can I persist the state so that it doesn't reset each time?
When trying to pass more than one pair of state variables, Do you just add the other state, setState in the value passed to the context.provider?
That’s up to you to decide. No right or wrong here. You can see the context provider as a container where you can pass anything you want to be accessible in you app
@@Weibenfalk I got that part, what I am referring to is in the Store.js I am trying to create another state, count, setCount to pass to the provider along with state, setState. I tried to do but this did not seem to work
Hmm that should work. If you access the correct elements in the array. I would use an object instead when you have multiple ones. It’s easier to access them then by it’s properties.
thank you so much !!!!!!
Thanks for the clear explanation! I've wrapped my App component in a context provider, and I can access the global state from the App component now. However, my App component has other components inside of it, and it seems like I can't access that state inside of them. Does this only work for direct children of the context provider?
If you wrap the app component you should be able to access the context in the complete app. That is every child component of the app
@@Weibenfalk weird! I wonder what I'm doing wrong! I keep getting this error: Uncaught TypeError: Cannot destructure property 'openAbout' of 'Object(...)(...)' as it is undefined.
So it thinks that the global state is undefined for some reason. It actually works when I wrap the child components in the context provider directly...It just doesn't like it when I wrap the parent component only.
@@xxulchikxx It's really hard to tell by this info. But the whole point with the context is that you should be able to wrap any component with a context and all the child components should be able to access the content. So if you wrap the App with the provider all the components from App and down should be able to access it.
@@xxulchikxx Im getting the same error! Did you ever find out what you were doing wrong?
Assigning the object to my createContext worked
export const Context = createContext([initialState]);
@@timothyosmond1799 yes, my issue was that I was using Three.js canvas, and that messes with the DOM somehow, so I had to use useContextBridge from react-three/drei to pass all that context down.
Great job!
Thanks man!
Very cool.
Great thanks!
what the font do you use in your code editor?
Hey thanks! That’s the infamous Operator Mono :)
Question: one of the problems that Redux resolve is accessing only parts of the global state instead of the global state as a whole because here you could mistakenly use setState to change the WHOLE of the global state mistakenly. Now, I know that this is not Redux, but using a Context.Consumer wrapper component around the child component, you can then extract which variables of the component you can access. Wouldn't that be better to limit the access of this component to the state?
You can have multiple context and multiple states and place them on different levels in your app. So you don’t need to put everything in one large context that wraps the complete app
When trying this with nextjs I get this: ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
08:22 You can use word wrap (press Alt + Z) and it will bring the long line in the next line. I am sure you already know it but anyways!
Maybe a stupid question :) But If i want multiple global state variables, how would i structure that?
You can have anything in your context. For example an object with different properties. Or you can have multiple contexts and context providers
I was searching for this in the whole internet till i found your perfect example , you're great thank you.
Just a question , is there a way to make this work if we are using CoolComponent as a class instead of a function
Thank you. Glad to help. You can’t use hooks inside class components.
The reason I hit the Subscribe button because of the "Coooooooooooooooooolness"!!
Haha thanks. Also way tooooooooo much reverb on this
Good video !
May i know what's that cool vscode theme you're using please?
It’s One Monokai 80s
Hello. Can you help me please? I need to create 2-3 states inside my initialState and than I want to change them in my another component. How can i do this? If this is possible of course.
Hmmm really don’t know what you try to achieve here :) why do you want to create a state inside a state? I would go for creating 3 separate states instead ... if you need them in a context you can create multiple contexts instead. Or you can have an object with multiple state properties in one state. Just as it works with this.state in a class component
@@Weibenfalk Thank you) I'll try it
Can you do a video with TypeScript??
can you update the context from another component?
You can update the context data from anywhere inside the wrapper for the context
You are a god!
thanks❤
ty cuy
i dont get it ;'(
Ok ... sorry to hear. What is it that you don't get?
Hidden gem
I like your accent ;D
Thanks!
9:11 😂
you have not changed global state