Global State with Context in React

No video

Global State with Context in React - React context

Рет қаралды 20,717

Күн бұрын

#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...
-
Find me somewhere below:
Website: www.weibenfalk...
Udemy: www.udemy.com/...
Linkedin: / thomas-weibenfalk-7635...
Twitter: / weibenfalk
Github: github.com/wei...
FreeCodeCamp: www.freecodeca...
Dev.to: dev.to/weibenfalk

Пікірлер: 88

@Weibenfalk 4 жыл бұрын

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 4 жыл бұрын

Man, I don't have words to say how happy I am. I went through so many KZfaq 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 4 жыл бұрын

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

@ericyoung7820 4 жыл бұрын

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

@Weibenfalk 4 жыл бұрын

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

@ksy9364 4 жыл бұрын

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 4 жыл бұрын

Glad to read that it helped :) thank you.

@arsnakehert 2 жыл бұрын

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

@essli9430 2 жыл бұрын

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

@santiagosolana8741 3 жыл бұрын

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

@Weibenfalk 3 жыл бұрын

Thanks. Glad it helped :)

@learnwithindra2037 2 жыл бұрын

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

@oxanasf6369 2 жыл бұрын

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 2 жыл бұрын

Thanks! Glad it helped

@thelma2084 3 жыл бұрын

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

@codeswithankit4316 4 жыл бұрын

Much needed video, Thanks for your help

@Weibenfalk 4 жыл бұрын

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

@valdompinga 2 жыл бұрын

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

@NeoNoggie 3 жыл бұрын

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

@Weibenfalk 3 жыл бұрын

Thanks! Great that you like it!

@alenanik 4 жыл бұрын

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

@Weibenfalk 4 жыл бұрын

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

@alexwarendh 3 жыл бұрын

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 3 жыл бұрын

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

@usamanaeem8737 5 күн бұрын

Thanks Man. It was a big help

@justicemanu1644 4 жыл бұрын

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

@itachi-senpaii 4 жыл бұрын

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

@hassanbajwa5807 3 жыл бұрын

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

@Triyanox 2 жыл бұрын

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

@asztonselecta965 3 жыл бұрын

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

@harshprajapati2729 2 жыл бұрын

Thanks, bro Helpful for me!

@innodjetinnodjet3121 3 жыл бұрын

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

@yasharhasanzadeh2944 3 жыл бұрын

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

@Weibenfalk 3 жыл бұрын

Great to hear! Thanks!

@karendoran3692 3 жыл бұрын

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

@Weibenfalk 3 жыл бұрын

Thanks

@aljimsonmegrino9580 3 жыл бұрын

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

@Weibenfalk 3 жыл бұрын

Thanks

@santra528 3 жыл бұрын

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!

@alulaleak 2 жыл бұрын

Very cool.

@abrahamterfie8802 3 жыл бұрын

thank you so much !!!!!!

@pandopando8996 3 жыл бұрын

super cool guy. great video. super clear and minimal

@Weibenfalk 3 жыл бұрын

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

@ejlz9542 4 жыл бұрын

Good video !

@planetmall2 4 жыл бұрын

Great job!

@Weibenfalk 4 жыл бұрын

Thanks man!

@ghostkee5031 4 жыл бұрын

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 4 жыл бұрын

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

@xXNJEEBXx Жыл бұрын

thanks❤

@simpingsyndrome 2 жыл бұрын

ty cuy

@santra528 3 жыл бұрын

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

@Weibenfalk 3 жыл бұрын

Haha thanks. Also way tooooooooo much reverb on this

@rafaelsantana4467 3 жыл бұрын

You are a god!

@majdirajeb6091 Жыл бұрын

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

@user-ww6ns4hn9r 3 жыл бұрын

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 3 жыл бұрын

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

@alexwheeler1386 2 жыл бұрын

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?

@SasaRistic1979 Жыл бұрын

Can you do a video with TypeScript??

@linus430 2 жыл бұрын

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

@linus430 2 жыл бұрын

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

@Weibenfalk 2 жыл бұрын

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

@aaronsoto3823 3 жыл бұрын

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 3 жыл бұрын

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 3 жыл бұрын

@@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 3 жыл бұрын

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.

@xxulchikxx 3 жыл бұрын

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 3 жыл бұрын

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 3 жыл бұрын

@@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 3 жыл бұрын

@@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 3 жыл бұрын

@@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 3 жыл бұрын

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

@aryan7069_ 2 жыл бұрын

which font you use please tell ?

@husseinsaad7969 4 жыл бұрын

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

@Weibenfalk 4 жыл бұрын

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

@benediktlantsoght1706 4 жыл бұрын

Hidden gem

@centurion3708 3 жыл бұрын

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

@Weibenfalk 3 жыл бұрын

It’s One Monokai 80s

@taraslysenko9547 3 жыл бұрын

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 3 жыл бұрын

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 3 жыл бұрын

@@Weibenfalk Thank you) I'll try it