- Doesn't understand the React Docs yet (in some moment you'll do it)
- Only wants an explicit and easy tutorial 🦥
You're in the correct place!
We're going to understand what is Context and what problem does it solve, then we're going through code!
Without further ado, let's do it 🏄♂️
In many applications, we have a state global (data which we need to manipulate in deferents parts of the app 💾)
Context, is a "state management" which provides a way to pass data through the component tree without having to pass props down manually at every level.
Every Context comes with a Provider, you need to wrap your components with the Provider this will allows to the components subscribe to the Context changes.
The Provider accepts a value prop to be passed to consuming components that are descendants
You can use a is a React component that subscribes to the Context changes which uses the "render props" technique to consume the value of the Context
In this example we're going to use the Hook useContext which accepts a Context object (the value returned from React.createContext) and returns the current Context value for that Context
It's important to remember that the current Context value is determined by the value prop of the nearest above the calling component in the tree.
Well people this it's all, to this point I hope that you can create a Context, subscribed your components and change the current value of the Context since a child (look carefully out the second image of the step 3)