New post on the React Series "useMemo" hook. Everything about it. Optimizing your applications is one of the major aspects which is often overlooked as a beginner.
What is Memoization?
Before we understand the useMemo hook, we need to understand the technique memoization.
Memoization i an optimization technique that passes a complex function to be memoized. In memoization, the result is "remembered" when the same parameters are passed-in subsequently.
For eg. Suppose you have function which reutrns a particular value each time it is executed. If you memoize the function, then it will return that value next time when you call that function without even executing the fnction.
What is useMemo?
The useMemo hook is used to return a memoized value.
There are two problems that useMemo seeks to address:
- Referential Equality: In 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.
- Computationally Expensive Operations: If re-rendering an expensive operation, like a long "for loop", it can hurt performance. Expensive operations can be costly in either time, memory, or processing. In addition to potential technical issues, this may lead to poor User Experience.
How to use the useMemo hook?
The useMemo takes in a function and dependency array. The dependency's list are the elements useMemo watches: if there are no changes, the function result will stay the same. Otherwise, it will re-run the function. If they don't change, it doesn't matter if our entire component re-renders, the function won't re-run but instead return the stored result.
This can be optimal if the wrapped function is large and expensive. That is the primary use for useMemo.
EXAMPLE:
From the official React docs, the syntax of useMemo looks like this:
const memoizedValue - useMemo(() => computeExpensiveValue(a, b), [a, b]);
// computeExpensiveValue = Function which you need to memoize
// [a, b] = Dependency Array => The function will rerun only if any of the value from this array changes.
Now let's understand the above example: "The useMemo function always runs on the first render."
This would block the thread until the expensive function (computeExpensiveValue) is completed, as useMemo runs in the first render. However, in subsequent renders, the expensive functions would not need to run again as long as 'a' or 'b' (values in dependency array) doesn't change.
useMemo would "remember" the return value of the function. It would make these expensive function appear to render instantaneously. This is ideal if you have one or two expensive, synchronous function.
When to use the useMemo hook?
Write your code so that it stills works without useMemo - and then add it to optimize performance.
When looking to implement useMemo, you can check with profiling tools to identify expensive performance issues. Expensive means it is using up a lot of resources(like memory). If you are defining a good number pf varaibles in a function at render, it makes sense to memoize with useMemo.
You won't want to have useMemo fire off any side effects or any asynchronous calls. In those instances, you should use useEffect(new post will be coming).
⚡Thanks For Reading | Happy Reacting🥂