• Momoization Concept

• useMemo

• react.memo

• Live Demo

• useMemo vs useCallback

• What problem solve in useMemo ?

• Why need useMemo?

• Does useMemo has any disadvantage?

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.

Syntex

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

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.

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

Resolution

YouTube Video