# how to: useCallback

## 1. useCallback
```jsx
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. 

## 2. Purpose of useCallback

```jsx
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](https://dmitripavlutin.com/react-throttle-debounce/#2-debouncing-a-callback-the-first-attempt).

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

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

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

  // ...
}
```

## 3. Links
- [Hooks API Reference - React](https://reactjs.org/docs/hooks-reference.html#usecallback)

- [Your Guide to React.useCallback()](https://dmitripavlutin.com/dont-overuse-react-usecallback/)

- [Memoization](https://en.wikipedia.org/wiki/Memoization)