{"id":27434,"date":"2022-12-15T13:42:10","date_gmt":"2022-12-15T21:42:10","guid":{"rendered":"https:\/\/coderpad.io\/?p=27434"},"modified":"2023-06-05T13:47:10","modified_gmt":"2023-06-05T20:47:10","slug":"a-guide-to-using-reacts-usememo-hook","status":"publish","type":"post","link":"https:\/\/coderpad.io\/blog\/development\/a-guide-to-using-reacts-usememo-hook\/","title":{"rendered":"A Guide To Using React’s useMemo Hook"},"content":{"rendered":"\n

React is one of the most used JavaScript libraries, and it is used for building fast and interactive user interfaces. But at times, implementing certain functions, fetching massive data from external sources, and lots more make it difficult for your React applications to run fast, thereby reducing performance.<\/p>\n\n\n\n

In this guide, you will learn what the useMemo<\/code> hook means, how you can use it to optimize your React applications, and when you should use it. You will also get to know other options you can use in other situations, so you don’t use the useMemo<\/code> hook when you should not.<\/p>\n\n\n\n

The useMemo<\/code> hook memoizes values in your React application. These values usually come from expensive functions, and you use the useMemo<\/code> hook to store the value, so the expensive function doesn’t always run.<\/p>\n\n\n\n

\n

\ud83d\udca1 Expensive functions are those that require a significant amount of time and resources (memory or processing power) to execute.<\/p>\n<\/blockquote>\n\n\n\n

What is memoization?<\/h2>\n\n\n\n

Memorization is a powerful optimization technique that caches computation results to retrieve them from the cache when needed. Hence, this speeds up your code because you don’t need to repeat unnecessary computations of expensive functions.<\/p>\n\n\n\n

An excellent example is the Fibonacci sequence. Each number in the Fibonacci sequence, or “Fibonacci number,” is the sum of the two numbers in the sequence before it. This sequence starts with 0 and 1. The third number is the addition of the first two in the sequence, which are 0 and 1, to become 1, and so on, as seen below:<\/p>\n\n\n\n

0, 1, 1, 2, 3, 5, 8, 13, 21, 34<\/em>, ...<\/code><\/p>\n\n\n\n

If you are to write a program to solve this, you can use recursion because each element is the sum of the previous two elements:<\/p>\n\n\n

const<\/span> fibonacci = (n<\/span>) =><\/span> {\n    if<\/span> (n <= 1<\/span>) return<\/span> 1<\/span>\n    return<\/span> fibonacci(n - 1<\/span>) + fibonacci(n - 2<\/span>)\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The above uses recursion; meaning it will continue to call a copy of itself until its value is less than one, then it returns one. To understand this better, here is an illustration of how this will work if you want to calculate for fibonacci(5)<\/code>.<\/p>\n\n\n\n
\"\"\/
A visual tree with branches displaying the Fibonacci sequence from 0 to 5. The tree is used to visually represent the fibonacci sequence and its progression.<\/figcaption><\/figure>\n\n\n\n
In the above, you will notice that fibonacci(3)<\/code>, fibonacci(2)<\/code>, fibonacci(1)<\/code>, and fibonacci(0)<\/code> are calculated several times, which can affect the speed when you have to do more expensive calculations or if you want to get the 35th value. <\/p>\n\n\n\n
You can fix this by introducing memorization, which lets you store the values of these positions and only return them instead of having to recompute them several times:<\/p>\n\n\n
const<\/span> fibonacci = (n, memoValues<\/span>) =><\/span> {\n    memoValues = memoValues || {}\n\n    if<\/span> (memoValues[n]) return<\/span> memoValues[n]\n\n    if<\/span> (n <= 1<\/span>) return<\/span> 1<\/span>\n    return<\/span> memoValues[n] = fibonacci(n-1<\/span>, memoValues) + fibonacci(n-2<\/span>, memoValues)\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The code above checks if there is a cached value; if so, it prevents recursion. If there is no cached value, it calculates the recursion and saves it to the cache immediately before returning the value. To understand this better, here is what the illustration for fibonacci(5)<\/code> now looks like:<\/p>\n\n\n\n
\"\"\/
A visual tree displaying the Fibonacci sequence from 0 to 5, but with memoization applied to improve calculation performance and efficiency.<\/figcaption><\/figure>\n\n\n\n
\n
\ud83d\udca1 Cache is a type of temporary storage that a computer or program uses to hold data that is likely to be accessed again in the near future.  <\/p>\n<\/blockquote>\n\n\n\n
There is no repetition, and the functions with blue backgrounds are getting “memoized values” instead of recomputing them.<\/p>\n\n\n\n
Now that we have a basic understanding of memoization, let’s see how it can help you store the values of expensive computations in your React application for better performance.<\/p>\n\n\n\n
React re-rendering problem<\/h2>\n\n\n\n
In React, whenever a state or prop updates or value changes, the component(s) re-renders, meaning all expensive functions, computations, and API requests are re-rendered, leading to slow performance. It doesn’t matter if the state has nothing to do with the other components; when a state changes in the parent component, every other component will re-render.<\/p>\n\n\n\n
To explain this, let’s create a react application that involves expensive calculations like the factorial calculation:<\/p>\n\n\n
import<\/span> { useState } from<\/span> 'react'<\/span>;\nimport<\/span> '.\/App.css'<\/span>;\n\nconst<\/span> calculateFibonacci = (n<\/span>) =><\/span> {\n    if<\/span> (n < 2<\/span>) {\n        return<\/span> n;\n    }\n    return<\/span> calculateFibonacci(n - 1<\/span>) + calculateFibonacci(n - 2<\/span>);\n};\n\nexport<\/span> const<\/span> App = ()<\/span> =><\/span> {\n    const<\/span> [number, setNumber] = useState(0<\/span>);\n    const<\/span> [name, setName] = useState(''<\/span>);\n    const<\/span> fibonacciResult = calculateFibonacci(number);\n\n    return<\/span> (\n        <div<\/span> className<\/span>=\"container\"<\/span>><\/span>\n            <h1<\/span>><\/span>Fibonacci Calculator<\/h1<\/span>><\/span>\n            <input<\/span>\n                type<\/span>= \"number\"<\/span>\n                value<\/span>={number}<\/span>\n                onChange<\/span>={(e)<\/span> =><\/span> setNumber(e.target.value)}\n            \/>\n            <p<\/span> className<\/span>=\"bold\"<\/span>><\/span>\n                This Fibonacci result for <span<\/span>><\/span>{number}<\/span<\/span>><\/span> is{' '}\n                <span<\/span>><\/span>{fibonacciResult}<\/span<\/span>><\/span>\n            <\/p<\/span>><\/span>\n            <div<\/span> className<\/span>=\"container2\"<\/span>><\/span>\n                <label<\/span>><\/span>Please Enter your name to see that it is slow:<\/label<\/span>><\/span>\n                <input<\/span>\n                    type<\/span>= \"text\"<\/span>\n                    value<\/span>={name}<\/span>\n                    onChange<\/span>={(e)<\/span> =><\/span> setName(e.target.value)}\n                \/>\n                <p<\/span> className<\/span>=\"bold\"<\/span>><\/span>{name || 'The name will appear here...'}<\/p<\/span>><\/span>\n            <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n    );\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
In the application above, there are two states, one to store the number from the input form while the second to store the name. Basically, what this application does is that any number you input into the number field will calculate the factorial using the external function placed outside the component:<\/p>\n\n\n
const<\/span> calculateFibonacci = (n<\/span>) =><\/span> {\n    if<\/span> (n < 2<\/span>) {\n        return<\/span> n;\n    }\n    return<\/span> calculateFibonacci(n - 1<\/span>) + calculateFibonacci(n - 2<\/span>);\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
This expensive function is called inside the component, and the number state is passed into it, so it calculates the value, and you can then display it in the application:<\/p>\n\n\n
const<\/span> fibonacciResult = calculateFibonacci(number);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
But the problem here is that whenever a state is updated, this function will always run even when the state does not affect the number state. For example, there is a name<\/code> state; whenever you type into the name input field, it will always re-render the component, thereby always running this expensive function.<\/p>\n\n\n\n
Let’s test this. If you pass a number from 35<\/code> upwards, you will begin to notice that it takes some seconds to calculate. This is because it will need to do a lot of recursions, as you can see in the GIF below.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
That is not the problem, but the problem is that when you try to do anything on your application that involves a state, it will take time because the application will re-render. Meaning the Fibonacci function will always calculate the value for the number passed. <\/p>\n\n\n\n
As you see below, when I type the name, even though it shows the component re-renders, it takes time for the name to appear because the function is calculated for each render.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
To fix this, you will introduce the useMemo<\/code> hook to store the value of expensive<\/em><\/strong> calculations and operations and stop them from continually rendering even when the component re-renders. useMemo<\/code> is an official hook you can import from react<\/code>.<\/p>\n\n\n
import<\/span> { useState, useMemo } from<\/span> 'react'<\/span>;\n\n\/\/ ...<\/span>\n\nconst<\/span> fibonacciResult = useMemo(()<\/span> =><\/span> calculateFibonacci(number), [number]);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
At this point, when you update other states or props in your component, as long as the number<\/code> state does not change, the value will be stored. The expensive function will not compute, making the performance of your application fast:<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Understanding the useMemo hook<\/h2>\n\n\n\n
The useMemo<\/code> hook is one of the many built-in react hooks that allow you to memoize values in React applications. It is used basically in two situations which are:<\/p>\n\n\n\n