What are useMemo and useCallback, what is the difference, and when should they be used?

useMemo and useCallback are React hooks that help optimize component performance by preventing unnecessary calculations and re-creation of functions.

• useMemo memorizes the result of a function calculation and recalculates it only if dependencies change. It is used for memoizing values.

• useCallback memorizes the function itself and returns it if dependencies haven't changed. It is used for memoizing functions to avoid creating a new function on each render.

Difference:

• useMemo returns a value (the result of the function).
• useCallback returns a function.

When to use:

• useMemo — when the calculation of a value is expensive and it doesn't need to be recalculated without dependency changes.
• useCallback — when you need to pass a function down the component tree and want to avoid unnecessary re-renders due to changes in the function reference.

Example:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => { doSomething(a); }, [a]);