When we develop applications with React there comes a time when we have to worry about its performance (the sooner the better 😛). In general, as soon as we start working on the development of medium-sized applications, optimization and performance are usually one of the main headaches.
In this article and taking advantage of the consolidation of the React Hooks I want to present a couple of solutions that can help avoid the two typical problems that cause poor performance in applications:
- Unnecessary re-renders.
- Heavy computational calculation in the components repeatedly.
useMemo hooks are two simple tools with which we can prevent some of the cases that cause such problems.
Let’s see them!
As you know, when a change occurs in the
props or the state of a React component it automatically causes a re-render of that component.
This is usually a good thing and in fact it is the way React works. However, sometimes we can “help” React in the task of deciding when to force a re-render in order to save the odd cycle, because as you know how to paint on screen it is one of the most expensive operations that an application must face.
Note. If you are curious how the Virtual Dom of React works I leave an article I wrote a while ago.
A common cause of these re-renders is to pass a new function to the child components each time the component changes.
In this case, we are creating an anonymous function every time
ComponentContainer is rendered, which forces a render in the
Component component since the property (even if the function does the same) has changed (we are passing it a new “object” ).
This re-rendering may become unnecessary in the event that the underlying data has not changed.
To avoid this we can use the
useCallback hook which “memorizes” the function and only returns to “rebuild” when one of the specified dependencies changes:
In this way, the
Component component will always receive the same callback for
handleItemClick until there is a change in the
onClick elements. This will prevent us from unnecessary re-renders.
Another cause of poor performance with React may be the complexity of the calculations made within the components.
It is at this time when the
useMemo is especially useful since it allows “memorizing” a value in order to obtain it whenever we need it without re-calculating it until the dependencies with which it was calculated change.
In this way, we will save recalculating the filtered list each time the
ListContainer component is renewed until the dependencies (in this case the
items property) change.
Despite having been a fairly short article, I believe that these types of publications help familiarize you with tools such as hooks and find use cases that help us solve problems that we will probably face when developing applications with React.
I hope you liked this article!
Do you want to read more articles like this?
If you liked this article I encourage you to subscribe to the newsletter that I send every Sunday with similar publications to this and more recommended content: 👇👇👇