---
tags:
  - Programming_Languages
  - javascript
  - react
  - react-hooks
---

# `useCallback`

In short, React's useCallback hook is used to wrap functions. It tells React to not re-create a wrapped function when a component re-renders, unless any of the useCallback's dependencies change.

`useCallback` returns a memoized version of the callback function it is passed. This means that the function object returned from useCallback will be the same between re-renders.

Remember that in JavaScript, functions are objects. As a result, every time a component containing a function re-renders, it creates a new instance of the function in memory. If a function doesn't change in response to a UI event throughout the lifecycle of the component, there is no need for it to rerender, hence `useCallback` should be applied.

> Given the same dependency value, the `useCallback` hook returns the same function instance between renderings (aka memoization).

This said, for small functions that are not intensive, it doesn't really matter if they are not memoized.

## Syntax

A standard case of this would be a function that runs on a button click, for instance when sending data from a form to a server. In the example below there is quite a lot going on, and most of it is independent of the actual UI-cycle of the component.

```jsx
const handleSubmit = useCallback(
  async (formValues) => {
    setPendSaveConfig(true);
    const payload = new GenerateConfig({
      workflowId: project_id,
      blockId: blockId,
      config: formValues,
    });
    axios
      .post(`${process.env.REACT_APP_ENDPOINT}/save-block-config`, payload)
      .then((res) => console.log(res))
      .finally(() => setPendSaveConfig(false))
      .catch((err) => console.error(err));
  },
  [blockId, project_id],
);
```

Note that the syntax is similar to [useEffect](./useEffect.md): there is a dependency array. The effect is the same: the function contained within `useCallback` will only re-rendered if one of these dependencies changes. However (see next section) the function will run in its memoized form on every click.

## Reference versus result

`useCallback` only memoizes the function _object_ (the reference) not the value that is _returned_ by the function (the result).

In the example below, the `calculatePi()` function reference will not change between renders but each time the click event fires, the value returned by `calculatePi()` will change. In other words, it will be assigned fresh memory.

```jsx
function ParentComponent() {
  const onHandleClick = useCallback(() => {
    const special = calculatePi();
  });

  return <SubComponent handleClick={onHandleClick} />;
}
```

## Use cases

You should not apply `useCallback` in a blanket fashion, this can reduce performance rather than improve it. The best scenarios are:

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.