function Component({myFunction}) {
  const refCount = React.useRef(0)
  const value = refCount.current ++
  
  return (
    <div>ComponentWithUseCallback, value = {value}</div>
  );
}

const ComponentWithUseCallback = React.memo(Component)

function ComponentWithoutUseCallback({myFunction}) {
  const refCount = React.useRef(0)
  const value = refCount.current ++
  
  return (
    <div>ComponentWithoutUseCallback, value = {value}</div>
  );
}

function App() {
  const [buttonState, setButtonState] = React.useState(false)
  const handleClickButton = () => {
    setButtonState(!buttonState)
  }
  const myFunction = React.useCallback(() => {
    return null
  }, [])
  
  return (
    <div>
      <button onClick={handleClickButton}>click</button>
      <ComponentWithUseCallback myFunction={myFunction}/>
      <ComponentWithoutUseCallback myFunction={myFunction}/>
    </div>
  )
}

ReactDOM.render(
  <App />, 
  document.getElementById("root")
);