ReactJS – useMemo hook


In this article, we are going to see how to optimize a React application by passing a memoized value.

This hook is used to optimize the React application by returning a memoized value which helps to prevent doing the complex calculations on every re-rendering. This hook stores the cached value and only updates the function on certain defined conditions.

Note: Don’t call side-effects in useMemo hooks; use useEffect hook instead.

Syntax

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Here, the returned value of computeExpensiveValue() function will only be changed on the next re-render if the values of a or b change.

Without useMemo Hook

Example

In this example, we will build a React application that has 3 input fields and will display the sum of two numbers returned by the function add.

App.jsx

import React, { useState } from 'react';
import './App.css';
const App = () => {
   const [name, setName] = useState('');
   const [val1, setVal1] = useState(0);
   const [val2, setVal2] = useState(0);

   const answer = add(val1, val2);

   return (
      <div>
         <input
            placeholder="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
         />
         <input
            placeholder="Value 1"
            value={val1}
            onChange={(e) => setVal1(e.target.value)}
         />
         <input
            placeholder="Value 2"
            value={val2}
            onChange={(e) => setVal2(e.target.value)}
         />
         {answer}
      </div>
   );
};

const add = (num1, num2) => {
   console.log('Adding numbers');
   return parseInt(num1) + parseInt(num2);
};

export default App;

In the above example, even when the user types a name, the add function is also called on every re-render which makes the React application not optimized. Add function is getting called on every re-render as when the user types, the state changes which re-renders the app.

Output

This will produce the following result.

With useMemo Hook

Example

App.jsx

import React, { useMemo, useState } from 'react';
import './App.css';
const App = () => {
   const [name, setName] = useState('');
   const [val1, setVal1] = useState(0);
   const [val2, setVal2] = useState(0);
   const answer = useMemo(() => {
      return add(val1, val2);
   }, [val1, val2]);
   return (
      <div>
         <input
            placeholder="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
         />
         <input
            placeholder="Value 1"
            value={val1}
            onChange={(e) => setVal1(e.target.value)}
         />
         <input
            placeholder="Value 2"
            value={val2}
            onChange={(e) => setVal2(e.target.value)}
         />
         {answer}
      </div>
   );
};

const add = (num1, num2) => {
   console.log('Adding numbers');
   return parseInt(num1) + parseInt(num2);
};
export default App;

In the above example, even if the user types the name, the add function is not called because it is called only if the values of val1 and val2 change.

Output

This will produce the following result.

Updated on: 19-Mar-2021

609 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements