What are the useCallback & useMemo hooks used for?

The useCallback and useMemo hooks exist to improve our components' performance.

useCallback is to prevent functions that are declared within the body of function components from being recreated on every render.

This can lead to unnecessary performance issues, especially for callback functions that are passed down to child components.

useMemo, on the other hand, memoizes an expensive operation that we give it.

Memoization is a technical term for functions that are able to "remember" past values they have computed if their arguments have not changed. If so, the function returns the "remembered" value.

In other words, we may have a calculation that takes a significant amount of computing resources and we want it to be performed as sparingly as possible.

If that case, we use the useMemo hook, which differs from the useCallback hook in that it returns a value, not a function.