10 React Hooks Explained ✨
Tags: javascript, showdev, writing, react
Published: 2021-02-06 20:38:05

_This blog is originally published on: [My Blog](blog.abhisheknaidu.tech)_


Before React Hooks (React < 16.8), developer's were required to write `class` components in order to take advantage of certain React Features. But now, `React Hooks` provides a more ergonomic way to build components because we can use stateful logic without changing our component hierarchy.

There are 10 Hooks in total 🔥

### 🚀 useState :
It is the most important and often used hook. The purpose of this hook to handle reactive data, any data that changes in the application is called state, when any of the data changes, React re-renders the UI.

```jsx
const [count, setCount] = React.useState(0);
```

### 🚀 useEffect :
It allows us to implement all of the lifecycle hooks from within a single function API.

```jsx
// this will run when the component mounts and anytime the stateful data changes
React.useEffect(() => {
    alert('Hey, Nads here!');
});

// this will run, when the component is first initialized
React.useEffect(() => {
    alert('Hey, Nads here!');
}, []);

// this will run only when count state changes
React.useEffect(() => {
    fetch('nads').then(() => setLoaded(true));
}, [count]);

// this will run when the component is destroyed or before the component is removed from UI.
React.useEffect(() => {
    alert('Hey, Nads here');

    return () => alert('Goodbye Component');
});
```

### 🚀 useContext :
This hook allows us to work with `React's Context API`, which itself a mechanism to allow us to share data within it's component tree without passing through props. It basically removes `prop-drilling`

```jsx
const ans = {
    right: '✅',
    wrong: '❌'
}

const AnsContext = createContext(ans);

function Exam(props) {
    return (
        // Any child component inside this component can access the value which is sent.
        <AnsContext.Provider value={ans.right}>
            <RightAns />
        </AnsContext.Provider>
    )
}

function RightAns() {
    // it consumes value from the nearest parent provider.
    const ans = React.useContext(AnsContext);
    return <p>{ans}</p>
    // previously we were required to wrap up inside the AnsContext.Consumer
    // but this useContext hook, get rids that.
}
```

### 🚀 useRef :
This hook allows us to create a mutable object. It is used, when the value keeps changes like in the case of useState hook, but the difference is, it doesn't trigger a re-render when the value changes.

The common use case of this, is to grab HTML elements from the DOM.

```jsx
function App() {
    const myBtn = React.useRef(null);
    const handleBtn = () => myBtn.current.click();
    return (
        <button ref={myBtn} onChange={handleBtn} >
        </button>
    )
}
```

### 🚀 useReducer :
It does very similiar to setState, It's a different way to manage state using `Redux Pattern`. Instead of updating the state directly, we `dispatch` actions, that go to a `reducer` function, and this function figure out, how to compute the next state.

<figure>
<img src="https://dev-to-uploads.s3.amazonaws.com/i/885ulztfmsm2xhdqj3mp.png" alt="reducer">
<figcaption>Fig. useReducer Architecture </figcaption>
</figure>

```jsx
function reducer(state, dispatch) {
    switch(action.type) {
        case 'increment':
            return state+1;
        case 'decrement':
            return state-1;
        default:
            throw new Error();
    }
}

function useReducer() {
    // state is the state we want to show in the UI.
    const [state, dispatch] = React.useReducer(reducer, 0);

    return (
        <>
        Count : {state}
        <button onClick={() => dispatch({type:'decrement'})}>-</button>
        <button onClick={() => dispatch({type:'increment'})}>+</button>
        </>
    )
}
```

### 🚀 useMemo :
This hook will help you to optimise computational cost or improve performance. It mostly used when we're needed to make expensive calculations.

```jsx
function useMemo() {
    
    const [count, setCount] = React.useState(60);

    const expensiveCount = useMemo(() => {
        return count**2;
    }, [count]) // recompute when count changes.
}
```

Works great for memoizing returned values, but in other `CSSNamespaceRule`, we want to memoize the whole function, in that case we can use this hook ↓

### 🚀 useCallback :

```jsx
function useCallbackDemo() {
    const [count, setCount] = useState(60);

    const showCount = React.useCallback(() => {
        alert(`Count ${count}`);
    }, [count])

    return <> <SomeChild handler = {showCount} /> </>
}
```

### 🚀 useImperativeHandle :
This hook is use to modify the exposed ref and it is rarely used.

```jsx
function useImperativeHandleDemo(props, ref) {
    
    const myBtn = useRef(null);

    React.useImperativeHandle(ref, () => ({
        click: () => {
            console.log('clicking button!');
            myBtn.current.click();
        }
    }));
}
```

### 🚀 useLayoutEffect :
It works same as useEffect hook with one difference, the callback will run after rendering the component but before the actual updates have been painted to the screen.

⚠️ : Blocks visual updates until your callback is finished.

```jsx
function useLayoutEffectDemo() {

    const myBtn = React.useRef(null);

    React.useLayoutEffect(() => {
        const rect = myBtn.current.getBoundingClientRect();
        // scroll position before the dom is visually updated
        console.log(rect.height);
    })
}
```

### 🚀 useDebugValue :
This hook doesn't make much sense, but it allows us to define our own custom labels in `React Dev Tools`, which are useful for debugging. Suppose we have `n` number of components which uses the same logic, then we can separately define our own function and that can be used in other components, but the key thing here is we can debug things 

```jsx
function useDisplayName() {
    const [displayName, setDisplayName] = React.useState();

    React.useEffect(() => {
        const data = fetchFromDatabase(props.userId);
        setDisplayName(data.displayName);
    }, []);

    React.useDebugValue(displayName ?? 'loading...');
    return displayName;
}
```
The return value can be used in other components or else where in the application like this 👇🏽
```jsx
function App() {
    const displayName = useDisplayName();
    
    return <button>{displayName}</button>;
}
```



References - `Fireship's Youtube Video` - [React Hooks](https://youtu.be/TNhaISOUy6Q)

Want to connect? [twitter](https://twitter.com/abhisheknaiidu)