ReactJs using Hook useMemo

This article will discuss one of the ReactJS Hooks that is quite important for React developers to understand, namely useMemo. The useMemo hook is used to make our code more efficient, but there are still many React developers, especially beginners, who haven't implemented it yet. In simple terms, if we add a value to useMemo, then that value will be remembered and will not be re-rendered in case of re-rendering until certain conditions have been determined when the value must be re-rendered.

We will try to discuss this further by using an example, consider the following code:

in the code example above we try to create a function called expensiveProcessing(line 11), imagine this function performs a very heavy process, but this time, this function only performs simple calculations. In the function, we add console.log() to log in to our browser console later, as a marker that this function is executed and performs calculations. After finishing creating the expensiveProcessing function, then we run and store the return value of the expensiveProcessing function in the value variable (line 16), then display it in the h1 element tag on (line 21).

In the next section, we create a button element (line 22) that executes the stateChangeHandler function (line 7). The stateChangeHandler function is used to increase the state value with a value of 1, using the setState function. The value of the state we display in the button element, so that every time the button is pressed, the sentence in the button will display the number of times the button has been pressed, taken from the state value. From the code example above, if we run it, it will more or less look like this:

The display in our previous sample code involved is quite simple and simple as above, at a glance nothing is wrong, let's take a deeper look at what is wrong with the results of our code above. From the results of running the code above, we open the console in our browser, for those who use firefox can display with the shortcut ctrl + shift + k. To be more clear, let's try to refresh the page. After we successfully refresh we will find a log that reads "expensive Processing function has run" which indicates that the expensiveProcessing function has been run. The display console will more or less look like the following:

note: there may be confused why there are 2x "expensiveProcessing function has run" which indicates the function has been executed twice in every page refresh. This happens because in index.js we run our App component on <React.StrictMode> which causes setState to run twice in development mode. In this case, this is not a problem, we just need to understand the difference

We have successfully run the above simple application and displayed the console in the browser, but so far nothing seems to be wrong. Now it's time to take a closer look at our simple application. If we try to press the "click" button we will again see the log on the console that reads "expensiveProcessing function has run" again. This happens because the expensiveProcessing function is restarted after we press the click button, and this means that our function is recalculated.

This process may not be very noticeable to us in this simple application, but it will be very annoying when our application is very complex and related to many resources, and makes our application very heavy. Then we might ask, why did this happen? We can see that the button's click event is handled by the clickHandler function, which does setState. When we setState on our app, our app will re-render. This causes functions that are in the same component and their descendants to be executed again.

The more serious question now is, how to solve this? React seems to have anticipated this, thus providing a useMemo Hook that serves to maintain a value, so that if a value does not change, it will not be reprocessed during a re-render, unless it is needed. This facility will be very useful for us to make our application lighter and more efficient. Next, we will immediately try to practice using it.

Using useMemo

To solve the above problem by using useMemo, we can do it as in the following code sample:

notice in the code sample above, we wrapped the expensiveProcessing function into useMemo, that's all we need to do. The way to use useMemo is no different from using useEffect or useCallback, only includes a callback function in the first parameter, and an array of data in the second parameter, which is useful for marking when the function in useMemo needs to be reprocessed.

After we have successfully implemented useMemo as above, now we try to run the sample code above, in the same way as before, and it will look like in the following image:

At first glance, there is nothing different from the time before we used useMemo before, but let's take a closer look. If we try to press the click button, we will be able to see that the state has changed marked by the number on the button will continue to grow, but pay attention to our console, there are no more logs like before. With no more logs in our console, it indicates that the expensiveProcessing function has been protected from the effects of re-rendering from setState.

The second parameter in useMemo

If we notice, useMemo has two parameters, the first is a callback where we run our function, and the second is to indicate when the function in useMemo should be run again. If we modify our last useMemo to look like this:

so our code will be like this now:

In the example above, we add the state to the array in the second parameter, like this, useMemo will mean, for every state, there is a change, then the function in useMemo will be rerun. If we run our simple example application using the modifications as above, we will find that every time we press the button, we will find a log on our console "expensiveProcessing function has run" which indicates that the expensiveProcessing function is re-run every time the button is pressed.

This happens because we know that every time a button is pressed, the onClick event will run the buttonHandler function which will change the state using setState, it will cause the state value to change, then useMemo will respond. The system is similar when we use useEffect.

Conclusion

The useMemo hook in React is a tool that helps us to make our code even more efficient, by preserving a value in our application so that it is not reprocessed during a re-render of our application. By using useMemo we can also determine when a value needs to be reprocessed, thus making the value more dynamic.

Epilogue

Thank you for reading this article, I hope this article is useful for you, if you learn something new from this article, please provide feedback on this article, or give us criticism, suggestions so that it can be even better. Maybe you want to buy me a cup of coffee?