What is the useMemo hook in React?

Hooks and their usage in React

Hooks are a relatively new feature of React that were introduced in React version 16.8 and enable us to use state and react features from a function-based component, which include:

  • useState
  • useEffect
  • useHistory

Hooks help us avoid the complexities of classes and make our code simpler to read and understand.

The useMemo hook in React

In this shot, we will go over the useMemo hook in React.

In addition to understanding the functionality of this hook, it is also important to note that this hook is important from a React interview perspective.

Many interviewers like to ask questions related to the useMemo hook.

useMemo is a hook that is used in the functional component of React that returns a memoized value.

Why use useMemo?

The basic purpose of the useMemo hook is related to the fact that we try to avoid the unnecessary re-rendering of components and props in our program.

We want to make sure that only the components that witness a change in their values are re-rendered; otherwise, there’s no need to re-render the component and slow down the performance.

Only re-rendering certain components will make your program efficient and improve the overall performance of your React app.

Code

Example 1

Let’s make a simple application to demonstrate the use of the useMemo hook.

The program below has the following components:

  • Increment button: starts from 0 and increases the count by 1.

  • Even num button: starts from 2 and returns even numbers going forward.

  • An evenNumDoouble() function that returns the twice value of the even number.

import React, {useState} from 'react';
  
function Counter() {
const [count, setCount] = useState(0);
const [evenNum,setEvenNum] = useState(2)
function evenNumDouble(){
    console.log("double");
    return evenNum * 2;
}
    return (
        <div>
           <h2>Counter: {count}</h2> 
           <h2>Even Numbers: {evenNum}</h2>
           <h2>even Number Double Value: {evenNumDouble()}</h2>
           <button onClick={() =>setCount(count+1)}>Increment</button>
           <button onClick={()=>setEvenNum(evenNum+2)}>Even Numbers</button>
        </div>
    )
}
 
export default Counter;

Explanation

  • When we click the button Even Numbers, the evenNumDouble() function is called because the state of evenNum is changed.

  • Clicking the Increment button also renders the evenNumDouble() function, although the count state does not change.

This means that every time the evenNumDouble() function is rendered unnecessarily (on the page), the code becomes less efficient. We will fix this with the useMemo hook below.

Example 2

import React,{useState, useMemo} from 'react'
function Counter() {
const [count, setCount] = useState(0);
const [evenNum,setEvenNum] = useState(2)
const memoHook = useMemo (function evenNumDouble(){
    console.log("double");
    return evenNum * 2;
},[evenNum])
    return (
        <div>
           <h2>Counter: {count}</h2> 
           <h2>Even Numbers: {evenNum}</h2>
           <h2>even Number Double Value: {memoHook}</h2>
           <button onClick={() =>setCount(count+1)}>Increment</button>
           <button onClick={()=>setEvenNum(evenNum+2)}>Even Numbers</button>
        </div>
    )
}
export default Counter

Explanation

In the code above, we set the output of the evenNumDouble() function into a constant memoHook.

This filters the function through the useMemo hook to only check if the specified variable (evenNum in this case) has been changed; only then will this function be rendered.

Notice that the changing state variable is specified in square brackets at the end of the useMemo hook, similar to the useEffect hook.

If we run the code above, we will find that our code only runs the evenNumDouble() function as required and not unnecessarily.

Conclusion

If you have a large codebase and your application is slow, then you can check whether there are any unnecessary renders on the page or not. If so, restrict them with the useMemo hook; this speeds up your app and makes it more efficient.

Free Resources

Attributions:
  1. undefined by undefined
License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)