UseMemo Hook (What is it ? , how to use it ? and why ? )
1. Introduction
Hello everyone, today we are gonna be talking about the useMemo hook , what is it, how and when we use it, but first let's define what are hooks in general before jumping to useMemo hook.
2. Hooks?
After the release of React 16.8 version, we were introduced for the first time to the new feature called “Hooks”, which allows us to manage state changes and lifecycle methods within functional components instead of class-based ones.
In fact, working with React’s local state, effects and context, became possible with functional components, through hooks such as useState, useEffect, and useContext.
In addition, Hooks include many other functions such as useReducer, useCallback, useMemo, useRef…
You can get more information about these APIs in the React API documentation.
3.What is the useMemo hook and what it is good for?
useMemo is a built-in react hook, that can potentially make your app more performant, by managing unnecessary re-rendering.
The re-rendering process in react is fired, in every life cycle of a component every time an update occurs, and operations like “for loops” can be time, memory, processing power consuming.
Expensive operations, can harm the performance and thus lead to poor user experience.
Therefore, React released the memo hook to deal with it.
4. Memoization Concept :
useMemo is based on the Memoization concept, which according to Wikipedia, 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 again with the same parameters. So in short terms Memoization is remembering or cashing a value when the same parameters are passed in subsequently so we don't have to rerender every single time.
5.How useMemo work?
in the official React documentation, useMemo’s signature looks like this:
useMemo syntax is similar to the useEffect’s where you can pass a function and an array of dependencies. useMemo watch the elements inside the array, and detect the changes in values, if there are no changes it doesn’t matter if the entire component re-renders, the function result will stay the same and it will not re-run but instead will return the memoized result. This can eventually help to avoid expensive calculations on every render.
6.Let’s see an Example :
we have here a single simple component called App, which has 2 pieces of state, one is count which we can be controlled with the add button to increment it, and the other is a boolean that refer to dark or light background theme which is toggled by the change them button.
and then we have a function that multiplies the counter by 2, but this function is very slow in which we have a really long for loop, doing nothing but slowing the function to emulate what would happen in a really complex, slow, running function, and when we click to increment the number it takes half a second to multiply the number, which makes it very slow to execute, and that’s normal because we are changing the count state in every click, and you're going to think that this delay will only occur when we change the number, but actually that’s incorrect thinking, because when we click the change theme button we will have the same delay, and that’s because whenever we update the state react will re-render the whole component, and therefore, the slow function will re-run in every change of state over and over again and that’s a very big performance problem.
And here when the useMemo hook really shines, by caching the count value so that way if its value did not change we don't have to re-run our slow function over and over again.
and the easy way to use it is to wrap our slow function inside the useMemo function and pass the count in the array of dependency so that the slow function will only run when our count changes.
And now when we toggle the change theme button, our background color changes instantly without any delay, since our count state did not change.
7. Conclusion
useMemo can help the performance of an application by “caching” expensive functions and preventing them from re-running, every time the state changes.
useMemo can be very practical when it comes to improving performance when dealing with expensive functions, but overusing can also slow down your application since the cashing process consumes memory, so that the more you use the hook, the more your application has to allocate memory.
This has been developed by myself at eDonec .
