Lesser used React Hooks
Published: 2021-10-16 13:18:17

In this blog we are going to talk about React hooks that are not used commonly.


 <b> 1. useMemo Hook </b>  :

The useMemo is a hook used in the functional component of react that returns a memoized value.In react also, we use this concept, whenever in the React component, the state and props do not change the component and the component does not re-render, it shows the same output.

 <b> Syntax </b>:

```
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

```
useMemo takes in a function and an array of dependencies. 


<b> Usage of useMemo </b> :

```
const memoizedList = useMemo(() => {
  return userList.map(user => {
    return {
      ...user,
      name: someExpensiveOperation(user.name)
    } 
  }) 
}, [userList])
```




<hr></hr>

<b> 2. useCallback Hook </b> :

The useCallback hook is used when we have a component in which the child is rerendering again and again without need.

<b> Syntax </b> :

```
const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);
```

Pass an inline callback and an array of dependencies. useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed. 


<b> Purpose of useCallback </b>

```
function MyComponent() {
  // handleClick is re-created on each render
  const handleClick = () => {
    console.log('Clicked!');
  };

  // ...
}
```
handleClick is a different function object on every rendering of MyComponent.

But in some cases you need to maintain a single function instance between renderings:

1. A functional component wrapped inside React.memo() accepts a function object prop
2. When the function object is a dependency to other hooks, e.g. useEffect(..., [callback])
3. When the function has some internal state, e.g. when the function is debounced or throttled.

That’s when useCallback(callbackFun, deps) is helpful: given the same dependency values deps, the hook returns (aka memoizes) the function instance between renderings:

```
import { useCallback } from 'react';

function MyComponent() {
  // handleClick is the same function object
  const handleClick = useCallback(() => {
    console.log('Clicked!');
  }, []);

  // ...
}
```
<hr></hr>

<b> 3.useReducer Hook </b>:

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.


<b> Syntax </b>
```
const [state, dispatch] = useReducer(reducer, initialArg, init);
```
It accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method. (If you’re familiar with Redux, you already know how this works.

Here is the countReducer example;

```
const initialState = { count: 0 }

const counterReducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}
```
<b> Specifying the initial State </b>

 Two ways to initialized the useReducer state;

 <b>1. Basic </b> :

We can just give it as a second argument to useReducer call;

```
const [state, dispatch] = useReducer(
  countReducer,
  { count: 0 } // second argument
);
```
<b> 2. Lazy Initialization </b> :

```
const initState = (defaultCount) => ({ count: defaultCount })

const Counter = ({ counter }) => {
    const [state, dispatch] = useReducer(
      countReducer,
      counter, // second argument
        initState // third argument
    );

    // Rest of the component...
}
```

<b> Usage </b>
After we initialize it we just need to call dispatch functions that we are getting from useReducer hook and use it as a handler inside our elements.

React guarantees that dispatch function identity is stable and won’t change on re-renders.

```
const Counter = ({ counter }) => {
    const [state, dispatch] = useReducer(countReducer, 0);

    return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}
```
* <b>References </b>

* https://reactjs.org/docs/hooks-reference.html
* https://dmitripavlutin.com/dont-overuse-react-usecallback/