useCallback and useMemo?
Charles 🛰
Posted on February 7, 2022
Lets's talk about useCallback and useMemo, both of them are really similar.
UseCallback is used to optimize the rendering behavior of your React function components, while useMemo is used to memoize expensive functions to avoid having to call them on every render.
So what means that?
The first difference between them is the syntax, useMemo do not take in consideration the arguments whereas useCallback do take arguments.
function memoUsed() {
const a = useMemo((arg1) => {
// React ignores arguments
return ‘insert JSX here’
}, [])
return a
}
function callbackUsed() {
const a = useCallback((what, where) => {
// can be used inside functions
return ‘insert ${what} ${where}’
})
return a(‘JSX’, ‘here’)
}
useMemo memoize values whereas in useCallback you can not.
useCallback gives you referential equality between renders for functions. And useMemo gives you referential equality between renders for values.
💖 💪 🙅 🚩
Charles 🛰
Posted on February 7, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
programming How to visualize bar chart with react-chart-2, showing label on the bar
November 28, 2024