React.useCallback reference

On this page

In a nutshell

useCallback returns a memoized callback that only changes if one of the given dependencies has changed.

When you declare a function within your React component like this:

const UserDetails = ({ user }) => {
  const getUsername = () => {
    return user.name
  }

  return (
    <Username getUsername={getUsername} />>
  )
}

React will re-create the getUsername function every time UserDetails is rendered. This means that the Username component will always re-render when UserDetails is re-rendered because the getUsername prop that it receives will be a different function (React components re-render when their props change).

You can get a performance boost and avoid unnecessary re-rendering of Username by wrapping the getUsername function in useCallback:

const UserDetails = ({ user })  => {
  const getUsername = useCallback(() => {
    return user.username
  }, [user])

  return (
    <Username getUsername={getUsername} />>
  )
}

Now, getUsername will be a memoized callback that will only be recreated between re-renders of UserDetails if the user dependency changes.

Sources

Tagged: React