Lesson 8. Optimizing performance with useMemo and useCallback 1. Memoization with useMemo

In this example, our goal is to display the number of prime numbers lower than a given number:

const PrimeNumbers = () => {
  const [input, setInput] = useState(10)
  const [max, setMax] = useState(10)

  const nb = nbPrimes(max)

  return (
    <>
      <p>
        <input
          type="number"
          value={input}
          onChange={(e) => setInput(Number(e.target.value))}
        />
        <button onClick={() => setMax(input)}>Submit</button>
      </p>
      <p>Number of primes: {nb}</p>
    </>
  )
}

// Helper functions

const isPrime = (n) => {
  if (n === 1) return false
  for (let k = 2; k < Math.sqrt(n); k++) if (n % k === 0) return false
  return true
}

const nbPrimes = (n) => {
  let nb = 0
  let k = 0
  while (k < n) if (isPrime(k++)) nb++
  return nb
}

render(PrimeNumbers)
const PrimeNumbers = () => {
  const [input, setInput] = useState(10)
  const [max, setMax] = useState(10)

  const nb = nbPrimes(max)

  return (
    <>
      <p>
        <input
          type="number"
          value={input}
          onChange={(e) => setInput(Number(e.target.value))}
        />
        <button onClick={() => setMax(input)}>Submit</button>
      </p>
      <p>Number of primes: {nb}</p>
    </>
  )
}

// Helper functions

const isPrime = (n) => {
  if (n === 1) return false
  for (let k = 2; k < Math.sqrt(n); k++) if (n % k === 0) return false
  return true
}

const nbPrimes = (n) => {
  let nb = 0
  let k = 0
  while (k < n) if (isPrime(k++)) nb++
  return nb
}

render(PrimeNumbers)
Result(reset)

• The input state contains the current value of the input.
• max is updated when the user clicks the button; it gets the input's value (input).
• The variable nb contains the result of a CPU-consuming operation: the number of prime numbers lower than max.

This component works perfectly fine on small numbers. But if you enter 1,000,000 in the input and press the button, it can take a couple of seconds to display the result (in a real use case using an async function would be better).

Suppose we change again the value of the input (even without clicking the button). In that case, it still takes a couple of seconds to update what is displayed, making the user interface relatively unresponsive.

The reason is that we recalculate the value of nb at each rendering, even if the value of max wasn’t changed.

The useMemo hook

The hook useMemo will help us here:

const nb = useMemo(() => {
  return nbPrimes(max)
}, [max])

useMemo takes two parameters:

• A function returning the result of the computation we want to achieve. useMemo will return the value this function returned.
• A dependencies array, similar to the one passed to useEffect.

Each time one of the values in the dependencies array is changed (and only at those times), useMemo will execute the function to return its return value. Here, each time max is updated, we will recalculate the number of prime numbers lower than it. We don’t if only input is changed.

const PrimeNumbers = () => {
  const [input, setInput] = useState(10)
  const [max, setMax] = useState(10)

  const nb = useMemo(() => {
    return nbPrimes(max)
  }, [max])

  return (
    <>
      <p>
        <input
          type="number"
          value={input}
          onChange={(e) => setInput(Number(e.target.value))}
        />
        <button onClick={() => setMax(input)}>Submit</button>
      </p>
      <p>Number of primes: {nb}</p>
    </>
  )
}

// Helper functions

const isPrime = (n) => {
  if (n === 1) return false
  for (let k = 2; k < Math.sqrt(n); k++) if (n % k === 0) return false
  return true
}

const nbPrimes = (n) => {
  let nb = 0
  let k = 0
  while (k < n) if (isPrime(k++)) nb++
  return nb
}

render(PrimeNumbers)
const PrimeNumbers = () => {
  const [input, setInput] = useState(10)
  const [max, setMax] = useState(10)

  const nb = useMemo(() => {
    return nbPrimes(max)
  }, [max])

  return (
    <>
      <p>
        <input
          type="number"
          value={input}
          onChange={(e) => setInput(Number(e.target.value))}
        />
        <button onClick={() => setMax(input)}>Submit</button>
      </p>
      <p>Number of primes: {nb}</p>
    </>
  )
}

// Helper functions

const isPrime = (n) => {
  if (n === 1) return false
  for (let k = 2; k < Math.sqrt(n); k++) if (n % k === 0) return false
  return true
}

const nbPrimes = (n) => {
  let nb = 0
  let k = 0
  while (k < n) if (isPrime(k++)) nb++
  return nb
}

render(PrimeNumbers)
Result(reset)