Understanding useCallback in react
Tags: react, javascript, beginners
Published: 2021-02-26 19:18:07

Hello there, so we have almost covered the most used hooks in Reactjs. In my last post, we talked about the `useRef` hook. In this post, we'll be covering the `useCallback` hook. So let's start right away.

# What is the useCallback hook
Use callback is a hook that returns a memoized callback function when one of the dependencies passed to it changes. 

### Wait! isn't that what useMemo does?
Well, the short answer is NO! Although both hooks are memoizing something they're however returning completely different things. The useMemo hook returns a **memoized value** while useCallback returns a **memoized function**

![Relief meme](https://media.tenor.com/images/e10fb2d6819f9492ee87967c0daad827/tenor.gif)

### Why `useCallbacks`?

The `useCallback` hook is very useful when creating an application where some of the functions created are complex and re-rendering the component might make such function run which we don't want, probably because it might slow down the run time.

### Let's see some actions
This hook accepts a callback function (**useCallback**) and a list of dependencies that makes the hook run when the value changes.


##### Basic usage

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

const callbackVariable = useCallback(() => {
     functionCall(a, b)
 },[a, b]);
```

**Example**
You'd likely use the `useCallback` hook alongside the [`useEffect`](https://dev.to/ilizette/understanding-useeffects-and-usecontext-47ah) hook. Sometimes to prevent a continuous re-rendering or infinite loop. Consider the example in the sandbox below.

{% codesandbox usecallbackreactexample-5k715 %}

In the example above, I have 2 components I am working with, the `App.js` file and the `Score.js` file. The score component has a useEffect that is updating a state on props change and logging a message to the console. 

```javascript
import React, { useEffect, useState } from "react";

const Score = ({ score }) => {
  const [showScore, setShowScore] = useState();

  useEffect(() => {
    setShowScore(score());
    console.log("Component updating");
  }, [score]);

  return (
   <div>
      <div>Score here: {showScore}</div>
   </div>
  );
}

export default Score;
```

In the `App.js` file, we have a `clacScore` function that is adding 5 to any score the user enters, an input field that allows a user to enter a player name, and a button to toggle the player name. Everything seems to work fine, doesn't it?

There's a problem with our code. When we enter a player's name into our input field a message logs in the console and this also happens when we do anything at all on the page. This is a problem because we only want that message to display when we update the score.

**useCallback to the rescue**
Try replacing the `clacScore` function with the code below.

```javascript
  const clacScore = useCallback(() => {
    return(scoreEntered * 5);
  }, [scoreEntered]);
 ```

{% codesandbox frosty-firefly-fr1m8 %}

Now try entering a player name into the input box or showing the player name. And notice that the message in the console only displays when we change the score. This is because we're using the `useCallback` hook to tell React to only render the `Score` component when the `scoreEntered` state is being updated. So the hook has actually helped us boost the performance of our little application.

### When should I useCallback?

So I'm sure we can agree that useCallback is awesome. However, that doesn't mean that we should start wrapping all our functions into a useCallback, remember that saying that goes:
> Too much of everything isn't cool.

Yeah, that applies for `useCallback` and `useMemo` and `useAnything` (wait! what?😅).

So the useCallback hook should only be used when

* We want to do [referential equality](http://adripofjavascript.com/blog/drips/object-equality-in-javascript.html) (because JavaScript sees a function as an object and we testing for equality between objects is quite a hassle in JavaScript)

* When we have a complex function (i.e the computation of that function is costly).

## Conclusion

Unrelated, but remember that one scene in justice league where they had to bring Superman back to life? they had a perfect reason to bring him back. The same logic applies here. Introducing useCallback means we're inviting some complexities already into our code, so we should have a perfect reason to useCallback in our code.


Thank you so much for reading. In the next section, we'll be covering the `useReducer` hook. If you have any contributions or comments please drop them in the comment below. Also please follow me for more content like this and stay safe.