In our last blog post, we have learned how React.memo helps to avoid re-rendering of component.

We will learn how to use useCallback hook to avoid creating a new function on every re-render. Instead, the function will be created whenever the dependency value changes.

A useCallback syntax will look like this,

useCallback(
  () => {
    // Memoized function
  },
  [] /* Dependency array */
);

We have our CounterButton component that is still re-rendering. We have added React.memo. Since the onClick function in the props changes on every re-render of the App component, the CounterButton still re-renders.

We will use useCallback to memoize the handleClick function in the App component. Only re-create if needed.

const handleClick = useCallback(() => {
  setClicks(click => click + 1);
}, []);

Now, the handleClick function won't get re-created on every re-render of the App component. So the props we pass to CounterButton also will be a static function and won't change.

Click on the click me button and see the console.log

`App` renders
`Counter` renders

It will only re-render the App and Counter component.

We have learned how useCallback helps to memoize functions. Also, helps to avoid unnecessary re-rendering.

You can check out the full example here. Play with it.