useMemo why, when & how
Idea of the article is to be concise and give the most important information about the mentioned technique.
Why, When and How are questions which we should try to answer each time we encounter something new in our technology journey.
Before we continue, let’s discuss what useMemo is.
useMemo is used to return memoized value from function provided from our side.
In computing, 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. (Wikipedia source).
As we can see from the previous definition useMemo is used to boost our performance. We covered the Why question from our title.
Next question which pops up is: When should we use useMemo?
useMemo should be used in two cases:
- To remember result from expensive computation
- To skip expensive re-render of a child component
How is the biggest part of our article and we will do it through examples. Examples will not be expensive computations but it will serve as executable examples.
Input field is handled by handleChange function.
Last digit from inserted value from Input field is set into state.
State value (number) is used in “expensive calculation”.
After doing “expensive calculation” the result is memoized and the component is rendered.
In the next iteration we type a number into the input field, if the number is the same as the previous one “expensive calculation” wouldn’t take place and instead the memoized value will be returned.
And that is it, if the value passed to the memoized function is the same as the previous one, the memoized value is returned. Dependency array is a place where we put values from which our calculation is dependent. In the above snippet, the number is only a dependent value.
Another use case of memoization is used in situations where we want to prevent unnecessary rendering of child components when something changed in parent.
When parent component change state, default behaviour cause re-render of all child components. That behaviour could be prevented by memoization of the child component.
In our code snippet on each keystroke Parent component change state which causes the ChildComponent to be re-rendered, but MemoizedChildComponent return cached value without doing re-rendering.
In this way we preserve our expensive re-rendering from occurring and serve cached value.
Conclusion:
We use useMemo to boost our performance by using cached values. Cached values are used in situation when inputs values has the same value as the value in previous render. Make hands dirty by using above examples and write comments if something is unclear.
