Do you think IIT Guwahati certified course can help you in your career?
Introduction
Hooks are a new functionality that was introduced in React 16.8. You can use state and other React features without having to write a class. Hooks are backward-compatible and do not contain any breaking changes.
The useMemo hook is one of the inbuilt hooks released in React 16.8. This hook allows you to memoize functions which in turn would improve the application's performance.
This post will go through what memoization is and how the useMemo hook may improve your projects' speed. You'll also discover when useMemo might lead to performance issues.
In layman's terms, Memoization or Memoisation is an optimization technique that improves performance by caching the results of time-consuming function calls.
Memoizing a function can enhance efficiency and save wasted CPU cycles if it always delivers the same output from a specific set of inputs.
Let's take the help of a simple example to understand it better.
Consider a function that sums up two values, say 1 + 1. This function would return the value 2. If we memoize this function and pass the same values again some other time, it will not add them up; it will remember the return value without executing the function.
How does useMemo work
The react useMemo hook accepts two arguments. The first of the two arguments is a function you want to memoize, and the second is an array of dependencies.
The dependents list contains the elements that useMemo watches. If no modifications are made, the function result will remain the same; otherwise, the function will be re-run.
Consider the below example of incorporating useMemo for an array that utilizes two computationally costly functions.
Here, the useMemo function would run on the first render and block the thread till both the costly functions finish running.
Barring the first render, these resource-intensive costly_functions wouldn't need to run again given that the listOfItems never changed. useMemo would store the return value of each function, which would make these functions render almost instantaneously. This is ideal when your program contains a resource-intensive function.
When to Use useMemo
First and foremost, you need to remember that your code cannot depend on the useMemo hook. What this means is that if the useMemo calls are replaced by direct function calls, it should not affect anything but the performance of the code.
The general practice is to write the code first and then revisit it and optimize using useMemo as and when it is deemed fit.
Use the useMemo hook with discretion
When attempting to optimize everything, it's easy to go overboard on performance. It's just as simple to overuse the React useMemo hook. Consider your options before deciding to utilize the useMemo hook.
The overhead
Keep in mind that the hook itself adds some overhead. useMemo itself brings with it some complex logic behind the scenes that need to be taken into consideration.
It can potentially cause new performance problems that didn't exist previously. Memoizing certainly does free up space for the CPU, but there are resources that are consumed. The only difference is that it now consumes a different sort of resource.
No guarantee
A word of caution. Don't put too much faith in useMemo. The React documentation states that useMemo does not ensure that the function will be executed only when dependencies change. React may also opt to recalculate memoized data to free up memory. As a result, double-check that your code works without using useMemo.
Therefore an essential thing to keep in mind is that useMemo should be used only for really expensive computations, else it can hamper the performance.
The useMemoOne is a semantically guaranteed concurrent mode safe alternative to useMemo, however, it will consume more memory in return for providing a stable cache.
React can release the cache of useMemo but the cache of useMemoOne would not be released till garbage is collected.
Frequently Asked Questions
What is memoization in react?
Answer: In React, memoization is a performance feature that helps components render faster.
Can memoization have a negative effect?
Answer: If you don't observe any speed gains after applying memoization, you should remove it. This will also free up some memory space.
What is the difference between React.memo and useMemo?
Answer: The major difference between them is that we use React.memo to wrap components, whereas we use useMemo to wrap functions.
Key Takeaways
The React useMemo hook can prove to be a handy tool when you are looking to optimize the performance of your applications. It can help you to memoize the output of expensive functions. While we do so, there are tradeoffs; this might increase the space overhead without improving the performance substantially, so caution has to be used.
So this was all about the useMemo hook in react. If you want to learn advanced front end web development, Coding Ninjas has one of the best courses available, which you can find here.
250+ registered 
