useMemo: Basic Usage

When should we use useMemo?

Sometimes we may have noticed that React Components may trigger the render method multiple times unnecessarily, this happens for example if we change the state or if a prop changes…

Sometimes we may not really care about this… But if there is a heavy-load function executing inside the component we may be in trouble.

For example:

const GIANT_NUMBER = 50000
const generateRandomNames = () => {
  return Array.from(Array(GIANT_NUMBER)).map(() => Math.ceil(Math.random() * 10))
}
const App = () => {
  const [ name, setName ] = useState('');
  const numbers = generateRandomNames();
const numbersJSX = numbers.map((n) => <div style={{ padding: '10px',}}>{n}</div>)
  return (
    <div className="App">
      <form>
        <label for="name">Nombre: </label>
        <input name="name" id="name" value={name} onChange={(evt) => {
          setName(evt.target.value);
        }} />
      </form>
      <div className="flex-container"
           style={{
             display: 'flex',
             flexWrap: 'wrap'
           }}>
      { numbersJSX }
    </div>
    </div>
  );
}
export default App;

The function generateRandomNames is triggering everytime the component wants to re-render. It takes a lot of resources… and makes our UI slow, everytime we change the state name. This function will execute and the numbers shown in the screen will change. How can we stop this?

Let’s wrap our heavy-load operations under the hook useMemo!

const numbers = useMemo(() => () => generateRandomNames() , [])

Now we will only generate numbers once, when the component is just loaded. When we update the name state the numbers variable won’t change.

That’s it!