function ComponentWithUseMemo() {
  const refCount = React.useRef(0)
  
  function complexCalculation() {
    refCount.current ++
    return refCount.current
  }
  
  const value = React.useMemo(() => complexCalculation(), [])
  
  return (
    <div>ComponentWithUseMemo, value = {value}</div>
  );
}

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

function App() {
  const [buttonState, setButtonState] = React.useState(false)
  const handleClickButton = () => {
    setButtonState(!buttonState)
  }
   
  return (
    <div>
      <button onClick={handleClickButton}>click</button>
      <ComponentWithoutUseMemo/>
      <ComponentWithUseMemo/>
    </div>
  )
}

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