DEV Community

Cover image for React Hooks: useMemo
Abdullah Furkan Özbek
Abdullah Furkan Özbek

Posted on • Updated on • Originally published at blog.furkanozbek.com

React Hooks: useMemo

1. Problem

In the lifecycle of a component, React re-renders the component when an update is made. When React checks for any changes in a component, it may detect an unintended or unexpected change due to how JavaScript handles equality and shallow comparisons. This change in the React application will cause it to re-render unnecessarily.

If one part re-renders, it re-renders the entire component tree.

2. Memoization

Memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again.

If we have a function compute 1 + 1, it will return 2. But if it uses memoization, the next time we run 1’s through the function, it won’t add them up; it will just remember the answer is 2 without executing the adding function.

3. Syntax

From the official React documentation, syntax is looking like this;

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
Enter fullscreen mode Exit fullscreen mode

useMemo takes in a function and an array of dependencies.

useMemo hook will run the expensive operation when one of the dependencies has been changed. If no changes has been made it will return stored value.

4. Example

Here is an example of useMemo in action.

const memoizedList = useMemo(() => {
  return userList.map(user => {
    return {
      ...user,
      name: someExpensiveOperation(user.name)
    } 
  }) 
}, [userList])
Enter fullscreen mode Exit fullscreen mode

5. Use right hook

In addition to useMemo, there is also useCallback and useEffect which can be used similar situations

The useCallback hook is similar to useMemo, but it returns a memoized function rather than memoized value.

If your dependencies array is not provided, there is no possibility of memoization, and it will compute a new value on every render. So in this reason you can go ahead with useEffect

// useMemo - returns -> memoized value
const memoizedValue = useMemo(() => expensiveFunction(a,b), [a,b])

// useCallback - returns -> memoized function
const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  },
  [a, b]
);
Enter fullscreen mode Exit fullscreen mode

Links

Conclusion

In this article we did take a look useMemo hook that React offers. You can also take a look other React hooks in below.

I would love to hear your feedbacks.

Top comments (4)

Collapse
 
xinyan_yu profile image
Chinita Y

1 Hey! Nice article thankyou! However i would like to ask about the array after arrow function[userLists]? Any difference when i provide 1. no array, 2. empty array and 3 meaningful array like you did?

Collapse
 
afozbek profile image
Abdullah Furkan Özbek

In that scenerio;
1- if there is no array meaning userList is undefined or null we need to check before applying map function. In that case we can return [] so it will not broke the code.

2- If it is empty array meaning [] this should be ok because it is an Array instance so it will just return [].

Did this make it clear or you were asking something else

Collapse
 
xinyan_yu profile image
Chinita Y

Yes that was clear, thank you!
I wanted to ask this question because when using useEffect, array or no array makes difference on rendering. Just wondering if that‘s the same with useMemo :)

Collapse
 
scriptkavi profile image
ScriptKavi

Many early birds have already started using this custom hooks library
in their ReactJs/NextJs project.

Have you started using it?

scriptkavi/hooks

PS: Don't be a late bloomer :P