useCallback

useCallback returns a memoized callback function.

This allows us to isolate resource intensive functions so that they will not automatically run on every render.

useCallback and useMemo are similar.

The main difference is that useMemo returns a memoized value and useCallback returns a memoized function.

It prevents a component from re-rendering unless its props have changed.

Example