UseCallback & UseMemo — A Side Note to the Official Doc

The following can be read as a side reference to the official React Doc:

Image for post
Image for post

UseCallback

UseMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const List = useMemo(
() =>
listOfItems.map(item => ({
...item,
itemProp1: expensiveFunction(props.first),
itemProp2: anotherPriceyFunction(props.second)
})),
[listOfItems]
)

So what’s the difference between useCallback and useMemo?

useCallback(fn, deps);
useMemo(fn, deps);

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store