DEV Community

Charles πŸ›°
Charles πŸ›°

Posted on

3 2

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.

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series πŸ“Ί

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series πŸ‘€

Watch the Youtube series

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay