What does useMemo do? When should it be used? Should the child component be wrapped in React.memo?

useMemo is a hook in React that allows you to memoize (cache) the result of a function computation to avoid unnecessary re-computations during component re-rendering.

Use useMemo when you have resource-intensive calculations or complex objects that should not be recreated unnecessarily.

Example:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Here, computeExpensiveValue will only be called if a or b change.

Regarding React.memo — it is a Higher-Order Component (HOC) that memoizes the component itself, preventing it from re-rendering if props haven't changed.

Wrap a child component with React.memo if:

• the component renders frequently,
• and props do not change,
• and re-rendering the component is costly.

In summary:

• useMemo optimizes calculations inside a component,
• React.memo optimizes re-rendering of child components.

Both tools can be used together to improve performance, but they should only be applied when truly necessary to avoid complicating the code.