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:
useStateuseEffectuseHistory
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
useMemohook.
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:
-
Incrementbutton: starts from0and increases the count by1. -
Even numbutton: starts from2and 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, theevenNumDouble()function is called because the state ofevenNumis changed. -
Clicking the
Incrementbutton also renders theevenNumDouble()function, although thecountstate 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
useMemohook, similar to theuseEffecthook.
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.
RELATED TAGS
CONTRIBUTOR
- undefined by undefined
