Global State with Context in React - React context

#useContext #useState
Learn how to use hooks and useContext to create a global state in React. This can be used instead of Redux. In this video I create a state without useReducer and use only the regular useState.
Support me by subscribing to this channel ❤️
Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩‍🚀
Check out my premium courses at www.weibenfalk.com
-
Find me somewhere below:
Website: www.weibenfalk.com
Udemy: www.udemy.com/user/thomas-928/
Linkedin: / thomas-weibenfalk-7635...
Twitter: / weibenfalk
Github: github.com/weibenfalk
FreeCodeCamp: www.freecodecamp.org/news/aut...
Dev.to: dev.to/weibenfalk

[@Weibenfalk]

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 😄

[@FilipeRebollo]

Man, I don't have words to say how happy I am. I went through so many UA-cam 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

[@Weibenfalk]

@@FilipeRebollo Thanks! Makes me happy to read that it helped you.

[@ericyoung7820]

nobody else on the entire internet, including the react docs shows how to use it correctly like this. you are a boss

[@Weibenfalk]

Thanks ... I'm glad to read that it helped you.

[@valdompinga3790]

man, u r saving my life, thank you so much!

[@hassanbajwa5807]

You helped me a ton! So straightforward. I really appreciate it. Thank you.

[@essli9430]

You're so cool brother
After hours of trying to understand context hook now i get like butter

[@ksy9364]

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!

[@Weibenfalk]

Glad to read that it helped :) thank you.

[@justicemanu1644]

Nice video,I like how the flow of the work is.It makes you understand how useState with context works.

[@arsnakehert]

Finally found a tutorial that shows how to use contexts for something that isn’t just themes, hahah
Thank you so much!

[@Triyanox]

Thanks a lot for putting the time and the effort to explain this concept !!!

[@learnwithindra2037]

Maaaan, i have been confuse with Context Concept for a few days. and now i am good with it. Many Thanks

[@santiagosolana8741]

DUDE! I cannot stress enough how helpful this tutorial was!!!! thank you!

[@Weibenfalk]

Thanks. Glad it helped :)

[@harshprajapati2729]

Thanks, bro Helpful for me!

[@innodjetinnodjet3121]

Salute for the tuto....very nice and easy to follow.

[@oxanasf6369]

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.

[@Weibenfalk]

Thanks! Glad it helped

[@NeoNoggie]

That's a pretty cool component. Edit: Also, fantastic tutorial. Way clearer than all the others I have watched so far!

[@Weibenfalk]

Thanks! Great that you like it!

[@yasharhasanzadeh2944]

Thank you I was looking exactly for this tutorial. You saved me.

[@Weibenfalk]

Great to hear! Thanks!

[@codeswithankit4316]

Much needed video, Thanks for your help

[@Weibenfalk]

Thanks for your support. Glad you like it! Spread the word ;)

[@abrahamterfie8802]

thank you so much !!!!!!

[@thelma2084]

Better than docs, and I agree about useReducer too bulky. Yay

[@itachi-senpaii]

Thank you so much sir . You are awesome ....

[@karendoran3692]

This was very nicely explained. You have really good content on your channel!

[@Weibenfalk]

Thanks

[@alenanik]

The double await had me 🤯😅 Great tutorial! Thanks a lot!

[@Weibenfalk]

Yeah that can be tricky ;) thanks and thanks for your support :)

[@alulaleak]

Very cool.

[@aljimsonmegrino9580]

Good job, you make context ez to understand, keep it up

[@Weibenfalk]

Thanks

[@rafaelsantana4467]

You are a god!

[@xXNJEEBXx]

thanks❤

[@ejlz9542]

Good video !

[@alexwarendh]

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.

[@Weibenfalk]

Context is a must know in React if you're going to build bigger apps =)

[@simpingsyndrome]

ty cuy

[@majdirajeb6091]

But the setState in the coolcomponent , does it change in the store also

[@aryan7069_]

which font you use please tell ?

[@alexwheeler1386]

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?

[@pandopando8996]

super cool guy. great video. super clear and minimal

[@Weibenfalk]

Hey .. thank you! I forgot to turn off the reverb on the voice on this one though =) haha

[@planetmall2]

Great job!

[@Weibenfalk]

Thanks man!

[@asztonselecta965]

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

[@linus430]

When trying this with nextjs I get this: ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization

[@ghostkee5031]

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

[@Weibenfalk]

Thank you. Glad to help. You can’t use hooks inside class components.

[@husseinsaad7969]

Great thanks!
what the font do you use in your code editor?

[@Weibenfalk]

Hey thanks! That’s the infamous Operator Mono :)

[@SasaRistic1979]

Can you do a video with TypeScript??

[@santra528]

The reason I hit the Subscribe button because of the "Coooooooooooooooooolness"!!

[@Weibenfalk]

Haha thanks. Also way tooooooooo much reverb on this

[@aaronsoto3823]

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?

[@Weibenfalk]

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

[@aaronsoto3823]

@@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

[@Weibenfalk]

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.

[@benediktlantsoght1706]

Hidden gem

[@xxulchikxx]

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]

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

[@xxulchikxx]

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

[@Weibenfalk]

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

[@timothyosmond1799]

@@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]);

[@xxulchikxx]

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

[@santra528]

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!

[@linus430]

Maybe a stupid question :) But If i want multiple global state variables, how would i structure that?

[@Weibenfalk]

You can have anything in your context. For example an object with different properties. Or you can have multiple contexts and context providers

[@taraslysenko9547]

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.

[@Weibenfalk]

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

[@taraslysenko9547]

@@Weibenfalk Thank you) I'll try it

[@user-ww6ns4hn9r]

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?

[@Weibenfalk]

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

[@centurion3708]

May i know what's that cool vscode theme you're using please?

[@Weibenfalk]

It’s One Monokai 80s

[@KatDog-jl3fs]

can you update the context from another component?

[@Weibenfalk]

You can update the context data from anywhere inside the wrapper for the context

[@Skia_]

I like your accent ;D

[@Weibenfalk]

Thanks!

[@pjguitar15]

9:11 😂

[@RainOnline]

i dont get it ;'(

[@Weibenfalk]

Ok ... sorry to hear. What is it that you don't get?

[@zafarhussain4436]

you have not changed global state