DEV Community

Charles 🛰
Charles 🛰

Posted on

 

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.

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!