So I really recommend you guys to look at the part one.

let Gooooooo 👴👴👴 .

Let's move on to our next hook use context .

😊 This hook allows you to work with react context API, which itself is a mechanism that allows you to share or scope values throughout the entire component tree.

*😊 Let's imagine we have an object called moods that can be happy or sad. To share the current mood across multiple disconnected components, we can create a context, one part of the application might be happy, So we use a context provider to scope the happy mood there. Now any child component inside of it can inherit that value without needing to pass props down to the children. *

const moods = {
  happy: '😊',
  sad: '😔'
}

const MoodContext =  createContext(moods);

function App(props) {
    return (
       <MoodContext.Provider>
               //your components
       </MoodContext.Provider>
    );
}

And that finally brings us to the useContext hook. It allows us to access or consume the current value from the context provider,😊 which might live many levels higher in the component tree, reading apparent value with useContext is much easier😊 than passing props down through multiple children.

function App(props) {
    return (
       <MoodContext.Provider value={moods.happy}>
               <MoodEmoji/>
       </MoodContext.Provider>
    );
}

function MoodEmoji(){

     //consume value from nearest parent provider

     const mood = useContext(MoodContext);

     return <p>{ mood }</p>

}

_Now if the mood changes from happy to sad in the parent provider, the value here will be updated automatically. _

Now if you've ever used react context in the past, you've likely used the consumer component, the useContext hook is basically a cleaner replacement for the consumer.

And now let's switch gears to useRef.

This hook allows you to create a mutable object that will keep the same reference between renders.
It can be used when you have a value that changes kind of like set state, but the difference being that it doesn't trigger a re-render when the value changes.

☝️ For example, if we tried to build a counter button with useRef, we could reference the current count by calling count current.

However,

☝️ when we click the button, the count would never change in the UI, because useRef doesn't trigger a re-render, like setState does. So this can be useful when you need a mutable😊 value.

🦸But a more common use case for use ref is to grab HTML elements from the DOM, we can start by creating a null reference called my button, then connected to the raw HTML button using the ref attribute.

🦸🦸From there, we can reference the HTML button and a function to call native Dom API's like click in this example, which would programmatically click the button.

The bottom line is that when you need to grab an element from the DOM, use ref is the hook you're looking for.⬅🏃

😈🔥⬅🏃 The next hook we'll look at is a pretty scary one useReducer.

But what it does is actually very similar to setState, it just goes about it in a different way, using the Redux pattern,....

See you in Part_3