"Magic" using React Hooks. Yes, you read it right.
Tags: webdev, react, javascript, beginners
Published: 2022-02-07 17:07:24

### First things first, What are hooks ?

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which "**hook into**" React state and lifecycle features from function components.

### When would I use a Hook? 
If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component. We’re going to do that right now!

### What all Hooks are there ?
1.  useState
2. useEffect
3. useContext
4. useRef
5. useReducer
6. useMemo
7. useCallback
8. useLayoutEffect

> Yes, the name of the hooks always start with `use`

Let's learn more about these hooks, later in this blog.
Here is a github repo and webpage demonstrating the usage of all the hooks.

Github Repository : [github-link](https://github.com/ahtrahdis7/react-hooks-usage-demo)

Demo : [demo-link](https://ahtrahdis7.github.io/react-hooks-usage-demo/)


### useState :
`const [count, setCount] = useState(0);`

 It declares a “state variable”. Our variable is called count but we could call it anything else, like banana. This is a way to “preserve” some values between the function calls — useState is a new way to use the exact same capabilities that this.state provides in a class. Normally, variables “disappear” when the function exits but state variables are preserved by React.

```
import { useState } from 'react';
export default function FunctionUsingUseState(){
    const [count, setCount] = useState(0);
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>
            Count : {count}
            </button>
        </div>
    );
}
```

### useEffect

It does the work of `componentDidMount` as is in `React.Component` class. By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we'll refer to it as our “effect”), and call it later after performing the DOM updates.

```
import { useState, useEffect } from 'react';
export default function UseStateUseEffect(){
    const [count, setCount] = useState(0);
    useEffect(() => {
        console.log('Use Effect is called');
    }, [count]);
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>
                Count : {count}
            </button>
        </div>
    );
}
```

### useContext
This hook is used to create common data that can be accessed throughout the component hierarchy without passing the props down manually to each level. 

```
import { useState, useContext, createContext } from 'react';

const MoodContext = createContext(moods);

export default function FunUseContext(){
    const [mood, setMood] = useState('😁');
    return (
        <MoodContext.Provider value={mood}>
            <div>
                <button onClick={() => setMood('🤬')}>Angry</button>
                <button onClick={() => setMood('😁')}>Happy</button>
                <button onClick={() => setMood('😔')}>Sad</button>
                <p>I am in <i>Parent</i> Function : {mood}</p>
            </div>
            <MoodEmoji/>
        </MoodContext.Provider>
    );
}

function MoodEmoji(){
    const mood = useContext(MoodContext);
    return (
        <div>
            <p>I am Inside <i>useContext</i> Function : {mood}</p>
        </div> 
    );
}
```

### useRef

It's a way to create a reference to a value in the component, and use it in the component's lifecycle.
It is Mutable, but, it doesn't re-render UI. It is mainly used to grab DOM Elements.
More common usecase of useRef is to grab native HTML elements from JSX.

```
import { useRef } from 'react';
export default function FunctionUsingUseRef(){
    const myBtn = useRef(null);

    const clickIt = () => myBtn.current.click();
    const helloButtonClicked = () => console.log('hello button clicked');

    return (
        <div>
            <p>Check the console.</p>
            <button ref={myBtn} onClick={helloButtonClicked}>Hello Button</button>
            <button onClick={clickIt}>Click Me! When You Click Me, You Indirectly Click 'Hello Button', Isn't that interesting.</button>
        </div> 
    );
}
```

### useReducer

Redux type of functionality, to **useReducer** to update **state** in **Functional Components** in React.
```
import { useReducer } from 'react';

function reducer(state, action) {
    switch(action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
}

export default function FunctionUsingUseState(){
    const [count, dispatch] = useReducer(reducer, 0);
    return (
        <div>
            <h3>{count}</h3>
            <button onClick={() => dispatch({type: 'DECREMENT'})}>-</button>
            <button onClick={() => dispatch({type: 'INCREMENT'})}>+</button>
        </div>
    );
}
```

### useMemo
This hook is a higher-order component that takes a function as an argument and returns a memoized version of that function.

```
import { useMemo, useState } from 'react';
export default function FunUseMemo(){
    const [count, setCount] = useState(60);

    // useMemo is a higher-order component that takes a function as an argument
    // and returns a memoized version of that function.
    
    const expensiveCount = useMemo(() => {
        return count ** 2;
    }, [count]);

    return (
        <div>
            <button onClick={() => setCount(count + 1)}>
            Count : {count}
            </button>
            <p>Expensive Count : {expensiveCount}</p>
        </div>
    );
}
```

### useCallback
In order to Memoize a whole function, **useCallback** is used.
The showCount function is called from multiple childs in the same DOM Tree, they will help prevent un-necessary re-renders of the same object as they will be using the same function object.

[Code for **useCallback**](https://github.com/ahtrahdis7/react-hooks-usage-demo/blob/main/src/hooks/use_callback.js)

### useLayoutEffect
It is similar to useEffect with a small difference. 
It runs after render but before it it is visually updated. 
It blocks visual updates until the Callback exection is finished.

Reach Out to Me @[mallicksidhartha7@gmail.com](mailto: mallicksidhartha7@gmail.com)
[Github](https://github.com/ahtrahdis7)
[LinkedIn](https://www.linkedin.com/in/mallicksidhartha7)