useMemo

Memoize a function for a given value.

Using useMemo stops the function from re-computing with the same values.

const [count, setCount] = useState(0)

const doubleCount = useMemo(() => count*2, [count])

const increment = useCallback(() => setCount(c => c + 1), [])

return (
  <>
    <div>Count: {count}</div>
    <div>Double count: {doubleCount}</div>

    <button onClick={increment}> Click me </button>
  </>

)