App.tsx

import { useCallback, useEffect, useMemo, useState } from 'react'

function Info({ blue, red }: any) {
  useMemo(() => getBlue(blue), [blue])
  useMemo(() => getRed(red), [red])
  // getBlue(blue)
  // getRed(red)
  return (
    <div>
      <p>blue {blue}</p>
      <p>red {red}</p>
    </div>
  )
}

function getBlue(value: any) {
  console.log('get blue')
}
function getRed(value: any) {
  console.log('get red')
}


function App() {
  const [redValue, setRedValue] = useState(0)
  const [blueValue, setBlueValue] = useState(0)
  function plusBlueValue() {
    setBlueValue(blueValue + 1)
  }
  function plusRedValue() {
    setRedValue(redValue + 1)
  }
  return (
    <div className="App">      
      <br/>
      <button onClick={plusBlueValue}>plus blue value</button>
      <button onClick={plusRedValue}>plus red value</button>
      <br/>
      <Info blue={blueValue} red={redValue}/>
    </div>
  );
}

export default App;