Understand React Js Hooks once and for all | part II
Tags: react, javascript, beginners, tutorial
Published: 2021-06-10 13:55:06


So  I really recommend you guys to look at the [part one](https://dev.to/dimer191996/understand-react-js-hooks-once-and-for-all-part-i-86h).


let Gooooooo 👴👴👴 .



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

![Reactjs useContext Hook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1okh8ycdq4rufg9ld0o.png)

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

![Reactjs useContext Hook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lxcgpz99163vbv8sy1g.png)

>*😊 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`. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xlbv4r3fkgov2r37anyh.png)


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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kvo9o5xn2i1qz4xdzwn.png)
☝️ For example, if we tried to build a counter button with `useRef`, we could reference the current count by calling count current. 

However, 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqv4xj622rc594mqw55f.png)
###☝️ when we click the button, the count would never change in the UI, because `useRef` doesn't trigger a re-render, like [`setState`](https://reactjs.org/docs/hooks-state.html) 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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lz03o0ln4lb8fpr7jbwi.png)
>🦸🦸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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jthebbsakp9d0ap46zqe.png)
_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