How to avoid this React Hooks performance pitfall

Suppose you have some expensive calculation that needs to happen just once when setting up your component, and suppose that this calculation depends on some prop. A plain functional component does a very bad job at this:

This performs very poorly, because the expensive calculation is carried out on every render.

Class components improve on this by allowing us to carry out a given operation only once, for example in the constructor:

The useState hook can be used to declare a "state variable" and set it to an initial value. That value can be changed and accessed in subsequent renders. With that in mind, you may naively try to do the following to improve the performance of your functional component:

You may think that since we’re dealing with state here that is shared between subsequent renders, the expensive calculation is only carried out on the first render, just like with class components. You’d be wrong.

To see why, recall that NaiveHooksComponent is a just a function, a function that is invoked on each render. That means that useState is invoked on each render. How useState works is a complicated story that need not concern us. What's important is what useState is invoked with: It's invoked with the return value of expensiveCalculation. But we will only know what that return value is if we actually invoke expensiveCalculation. As a result, our NaiveHooksComponent is doomed to carry out the expensive calculation on each render, just like our previous FunctionalComponent that didn't use useState.

Fortunately, React Hooks provide us with three options to handle state that are just as performant as class components.

1. useMemo

As a rule of thumb, useMemo will only carry out the expensive calculation again if the value of arg changes. This is only a rule of thumb though, since future versions of React may occasionally recalculate the memoized value.

The next two options are more reliable.

2. Passing functions to useState

This function is only invoked on the first render. That’s super useful. (Though you need to remember that if you want to store an actual function in state, you have to wrap it inside of another function. Otherwise, you end up storing the function’s return value instead of the function itself.)

3. useRef

The third option is to use the useRef hook:

The choice between these two options comes down to whether you ever want to update the result of the expensive calculation. Think of the difference between option 2 and option 3 as analogous to the difference between storing something in this.state or storing it in this directly.

Related posts:

There are many methods of finding a coach, for example, coach matching services, online directories etc. However, the key here is you. It is important you get along with your coach, feel that your…

Hola! this is my first time writing on my own blog. ya gue buat ini biar history perjalanan perjuangan baik karir dan self development gue bisa ternotulensi dengan baik haha , ketimbang harus tulis…

Before diving into Ledger systems, let us quickly understand General Ledger (being used since 15 century). It is governed by three accounting principles — Debit the receiver, credit the giver; Debit…