useCallback and useMemo?

lautaro

Charles 🛰

Posted on February 7, 2022

useCallback and useMemo?

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’)
}
Enter fullscreen mode Exit fullscreen mode

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.

💖 💪 🙅 🚩
lautaro
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