React Hooks + Context API = Global State Pattern

Learn how to use React Hooks with the Context API to create a global state store. No need for Redux anymore, everything you needed Redux for can be done with the React API. If you've used Mobx State Tree, this global tree pattern should should feel familiar .

[semlimi]

So far this is the only video out of 5 others I've watched that's finally helped me understand how useContext really works. Thank you for the great tutorial!

[fortoday]

I watched like 15 tutorials before someone explained this properly. Thank you!

[azatsalikhov]

FYI, the "weird 'T' error" (at 18:28 mark) is coming from Store.js file on Thanks for the video, man! BTW, quick re-factoring of code does get confusing as it meshes one approach with another. Personally, I'd rather present one way of doing it then show how it's done another way and then explain the logic behind the differences implemented.

[sergiolenoo]

15:40 "lets set vegetable to...hmmm...i don't like many vegetables" LOL
By the way, nice tutorial. Greetings from Brazil.

[kunal-bonage]

Really good explanation. Gets a proper idea about how to use useContext hook.

[miliu]

Thanks for the nice tutorial...I like the global state using context, and have been using it for a while, but run into a problem as my app grows. In your tutorial you created a context for each state, which is fine if you just have a few. However, in a real-life app, you likely have much more states you want to share. In this case, your Store.js will have providers nested very deeply. To workaround this problem, I created a object (instead of individual property) as the global context, so, const [state, setState] = useState({}), and you can set state like setState({...state, x: y}) which is nice and clean too. However, the problem is that setState is async and if you call it one after the other, the previous ones are ignored. Before hooks, we used to have a callback in setState, but it's gone. Using effects are also getting messy very quickly. Any tips how to workaround this?

[Techonsapevole]

Thanks, very useful and real use case pattern

[naveenp]

hi i have working with react native and i am trying to implemet the useContext api and when try to display state value in inside <text> its showing only first charecter of initeal value i give, , do you think i am missing anything out here

[clockwerkz]

Great video, but I'm a little unclear on something: You have "const [vegetable, setVegetable] = useState('Tomato');" Which I understand - what's confusing for me is you also have "const VegetableContext = above that. Are they both being set to the value "Tomato"? I don't understand why the seemingly double declaration..

[MarioIliev]

Search "store me" in NPM. It's a fast, easy, no boilerplate React state management system.

[zuhaoluo]

Can you also include github repo for this project? Thx

[nlgachu]

please dont use array to pass data to provider. Use objects. Same goes for consumer.

[GifCoDigital]

Out of all the mumbling and bumbling around, taking 10min to get to the point where using CRA whould have had you from the start, the thing that bothered me the most was you saying Tomato is a vegetable. lol