React.memo() with function in props

react-memo.js

const MemoizedComponent = React.memo(MyComponent);

// In this case, the MemoizedComponent will re-render when the App re-render.
// Because when the app re-render, the function handleClick will have the new reference.
const App = () => {
  const handleClick = () => {
    // logic when click ...
  }
  
  return (
    <MemoizedComponent onClick={handleClick} />
  )
}

// We resolve the above case with useCallback. It only create new function when the dependencies changed
const App = () => {
  const handleClick = useCallback(() => {
    // logic when click ...
  }, dependencies) // this line only run (re-assign new reference into function handleClick) if the dependencies is changed

  return (
    <MemoizedComponent onClick={handleClick} />
  )
}