React Hooks to optimize performance

useMemo and useCallback hooks usage guide to increase the performance of our applications

Gerardo Fernández
Oct 17 · 3 min read

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.

The useCallback and useMemo hooks are two simple tools with which we can prevent some of the cases that cause such problems.

Let’s see them!


Unnecessary re-renders

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.

https://medium.com/@ger86/y-eso-del-virtual-dom-de-react-qué-es-3feed6366925

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 item or onClick elements. This will prevent us from unnecessary re-renders.


Expensive calculations

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 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.

For example:

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.


Final thoughts

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: 👇👇👇

JavaScript in Plain English

Learn the web's most important programming language.

Gerardo Fernández

Written by

Entre paseo y paseo con Simba desarrollo en Symfony y React

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade