useCallback vs. useMemo and when to use them

Question

What is the main difference between useCallback and useMemo? And when to use useCallback of React Hooks?

Answer 1

useMemo(() => (bar) => foo + bar, [foo]);

Equivalent code with useCallback:

useCallback((bar) => foo + bar, [foo]);

Use callback is just a shorthand variation of useMemo to use with functions.

Here is why it exists: When you use useMemo,the value usually changes when one of its dependencies change. For example:

const fullName = useMemo(() => firstName + lastName, [firstName, lastName]);

If firstName or lastName change, fullName will also change. On the other hand, functions themselves usually don't need to be recomputed, and their dependencies are mostly closure values that may change.

const getFullName = useCallback(() => firstName + lastName, [firstName, lastName]);

Here, when firstName or lastName change, we don't need to have a completely different function with a different body, but we do need to have a new instance of the same function so that it has up to date values in closure (dependencies). So React team just added it for convenience as it is a common use case, and the () => () => syntax is somewhat ugly.

Answer 2

useMemo and useCallback both use something called memoization which you can think of it like the hooks are remembering something.

---

The differences:

useMemo will memoize/remember the value that is returned from the function you pass into it until the dependancies change.

const num = 10
const result = useMemo(() => num + num, [num])
// result is now equal to 20

useCallback will memoize/remember the actual function you pass into it until the dependancies change which gives you something called referential equality.

const num = 10
const result = useCallback(() => num + num, [num])
// result is now equal to () => num + num.
// result === result between renders.

---

Referential equality:

() => {} === () => {} // This is false

const a = () => {}
a === a // This is true

Answer 3

useMemo helps prevent re-rendering unless dependencies to a function have changed while useCallback helps prevent rerendering unless a function has changed. I.e when a function is to be passed as an argument to another function, useCallback will only allow re-rendering after a different function is passed. Here is a link to a resource that might help explain further

https://btholt.github.io/complete-intro-to-react-v5/hooks-in-depth