Explain React.memo, useMemo, and useCallback

Answer

All three are memoization techniques to prevent unnecessary re-renders or recalculations.

Prevents re-render if props haven't changed:

const Child = React.memo(({ name }) => {
	return <div>{name}</div>;
});

Memoizes expensive calculations:

const expensiveValue = useMemo(() => {
	return computeExpensiveValue(a, b);
}, [a, b]);

Memoizes function references:

const handleClick = useCallback(() => {
	doSomething(id);
}, [id]);

Tool	Use When
`React.memo`	Child receives same props frequently
`useMemo`	Expensive calculations that don't need to re-run
`useCallback`	Passing callbacks to memoized children