# React js useMemo Hook

* Momoization Concept
    
* useMemo
    
* react.memo
    
* Live Demo
    
* useMemo vs useCallback
    
* What problem solve in useMemo ?
    
* Why need useMemo?
    
* Does useMemo has any disadvantage?
    

![](https://miro.medium.com/v2/resize:fit:1400/1*uXdk1tzWvk2W2UGqwjOfMw.png align="left")

**Background**

The term “**Memoization**” comes from the Latin word “memorandum” (to remember), which is commonly shortened to “**memo**” in American English, and which means “to transform the results of a function into something to remember.”.

**Memoization**

In computing, memoization is used to speed up computer programs by eliminating the repetitive computation of results, and by avoiding repeated calls to functions that process the same input.

# **useMemo**

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

![](https://miro.medium.com/v2/resize:fit:1400/1*MkeNDLHKoenmI0PF27EpuQ.png align="left")

**Syntex**

useMemo() is a built-in React hook that accepts 2 arguments — a function compute that computes a result, and the depedencies array:

![](https://miro.medium.com/v2/resize:fit:1400/1*3DT2qnTHlF8b6RM3HdttTA.png align="left")

# **react.memo**

**Memo** is a higher-order component that is used to memoize a component, which means it caches the output of the component and only re-renders it if its props have changed. This can be useful when a component’s rendering is expensive, and you want to avoid unnecessary re-renders. Memo can be imported from ‘react’ and wrapped around a functional component.

![](https://miro.medium.com/v2/resize:fit:1400/1*qR5Q5YDjIANqnINVNtj7iw.png align="left")

![](https://miro.medium.com/v2/resize:fit:1400/1*lzkWKBceZbBHI-1tlhEW6g.png align="left")

# **useMemo vs useCallback**

The useMemo and useCallback Hooks are similar. The main difference is that useMemo returns a memoized value and useCallback returns a memoized function

# **What problem solved in useMemo ?**

Improve Application Performance

# **How to implement Memoization concept in class component ?**

Using PureComponent

# **Does useMemo have any disadvantage?**

Yes we can’t call useMemo in loop like

![](https://miro.medium.com/v2/resize:fit:1400/1*9IIt78zSI7aR4z2c_798LA.png align="left")

Resolution

![](https://miro.medium.com/v2/resize:fit:1400/1*uiO0ZJ11y7Tb4uaLDbVR9w.png align="left")

# **YouTube Video**

%[https://youtu.be/IqjYUD0h_Nk]