Usecase for useMemo hook

Question

Looking at React's useMemo documentation. They say to use it when you need to compute an expensive calculation.

This optimization helps to avoid expensive calculations on every render.

I looked at the memoized link they provide and what I understood is that you can think of it like an cache.

I'm not an expert at computer science, but I know that memoization is a good optimization for calculating fibonacci

I'm still trying to understand better why and how to use useMemo, but a few things are still unclear to me.

• What is considered expensive calculations?
• Can someone give real react examples?
• In what cases useMemo is good for performance optimization?

Peppers

Answer 1

First of all, you should know that you can only memoize pure functions, that is functions whose output purely depends on their arguments.

So in short, you would do memoization when you know that most often input remains the same and you wouldn't want to unnecessarily recalculate the result again and again for the same input especially when the calculation is expensive which may mean that the data-set on which computation needs to be performed is large.

• A case of using memoization in React maybe when you are trying to filter data from a large array.

• Another case would be when you wish to transform a nested object based on some parameters into another object or array.

In such as case useMemo is really helpful. If the array and the filter criteria remain the same across re-renders, the calculation is not done again instead the previously calculated data is returned from the cache. Remember, memoized data is stored in memory, so make sure you are using it when needed.

Avestan

Does this mean if we have multiple criterias e.g 5 of them, will all of these 5 filter results be cached in the memory? I assume React.memo after some time get's does the garbage collecting of those? – Carbonaceous

I 2nd EugenSunic's question. It is not clear from descriptions (React's or this answer here). Does it recalculate any time a parameter changes? Or will it recognize it's seen a given combo of parameter values before, and pull a previously cached result that was calculated because of that combo? It sounds like it recalculates again upon any parameter change; i.e. it only caches the most recent calculation, not some number of previous calculations tied to their given inputs. True? In which case, useMemo is not the solution for certain optimizations. – Cleghorn

Answer 2

Memoization is the process of storing a computed value so you don't have to recalculate it again.
In react, most common usages are those of values derived from a redux store (for which exists reselect), or a complete memoization of functional components.
There is no golden rule to decide whether a function is expensive and should be memoized, as it depends heavily on your specific use case, and it's performance pitfalls, but usually it is saved for array filtering/sorting, or stuff like that.
The best way to know what should be memoized and what not is to profile your app, see which computations take the most resources and memoize them to see if it makes a difference.

Agreed

Answer 3

To answer EugenSunic's commented question question, useMemo does NOT memoize all the dependency combos you use, only your CURRENT dependency array.

Say your useMemo looks like:

const [x, setX] = useState(1)
const doubleX = useMemo(() => {
    console.log(`Recalculating...`)
    return x * 2
  }, [x])

/* component returns an input that updates x */

On initial render, x is 1; useMemo console.logs "Recalculating..." and returns 1 * 2 (= 2).

On subsequent renders, if x is still 1, useMemo will return 2 without rerunning the multiplication - you can verify this because console.log does not run.

Now update your dependency; say x is 6. useMemo console.logs "Recalculating...", runs 2 * 6 and returns 12.

You update your dependency; x is 1 again. useMemo will console.log "Recalculating...", run the multiplication again (2 * 1) and return 2.

Agger