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]);

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])

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]
);

Links

• Hooks API Reference - React
• Understanding the React useMemo Hook | DigitalOcean

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.

Comments

[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?

[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

[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 :)

[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