Full Stack Development

Expensive? useMemo

by Tomas Trescak t.trescak@westernsydney.edu.au

Conditional Rendering

Introduction

      import { render, useState, useEffec, useMemo } from "react";

const calculateFibonacci = (num) => {
  if (num <= 1) return num;
  return calculateFibonacci(num - 1) 
    + calculateFibonacci(num - 2);
};

const App = () => {
  const [num, setNumber] = useState(40);
  const [increment, setIncrement] = useState(0);

  const result = calculateFibonacci(num);


  

  return (
    <div>
      <h1>useMemo Hook Example</h1>
      <p>Result of Expensive Calculation: {result}</p>

      <button onClick={() => setNumber(num + 1)}>
        Change Fibonacci 
      </button> [Fibonacci: {num}]

      {/* Increment unrelated to expensive calculation */}
      <button onClick={() => setIncrement(increment + 1)}>
        Increment Count
      </button> [Count: {increment}]
    </div>
  );
};

render(<App />)

      body { 
    padding: 16px;  
    font-size: 24px;
}

h1 {
    font-size: 32px;
}

The useMemo hook in React is used to optimize performance by memoizing expensive computations. It prevents recalculating values unnecessarily by caching the result of a function when its dependencies don’t change.

Consider the calculateFibonacci function, which uses recursion to compute the Fibonacci sequence. This process is computationally very expensive.

When trying to increment the value of count, the UI is very sluggish as on each re-render, the sequence is recalculated.

The problem occurs on this line executing on each render.

Instead, we can use the useMemo hook, which will cache the result of the computation of the Fibonacci sequence. Similarly to useEffect hook, it has a dependency array that tells the useMemo when it needs to be re-computed.

Try clicking on the Increment Count button to see that the response is much faster! Clicking on Change Input re-calculates the Fibonacci sequence, be patient!