Q9: What is the difference between useMemo and useCallback?
useMemo: Caches the result value of an expensive calculation (useMemo(() => computeValue(a), [a])).useCallback: Caches the function instance itself between re-renders (useCallback(() => handleClick(), [])) to prevent breaking child componentReact.memoreference equality checks.
useMemo vs useCallback Usage
// Memoize calculated result value
const expensiveValue = useMemo(() => {
return calculateBigData(data);
}, [data]);
// Memoize callback function reference pointer
const handleAction = useCallback(() => {
console.log('Action performed for id:', id);
}, [id]);💡 useMemo skips re-calculating big data when data is unchanged; useCallback maintains identical handleAction references.
Key Takeaways
useMemomemoizes computed return values.useCallbackmemoizes function reference pointers across renders.
Knowledge Check
What primary performance issue does useCallback solve when passing functions to memoized child components?