useMemo examples
The useMemo hook tends to be a hook that we use when we want to optimize the site for either resolving site performance and/or improving user experience. Thus, it normally tends to be used to address problems. In the following sections, we will go through two examples relating to a search to demonstrate the application of useMemo as an optimization tool.
Clicking to search
Say you have a list of fruits and you'd like to search it to find the matched fruit using an input box and a button. For example, typing "bl" should return us blackberries and blueberries from a list of fruits.
Figure 6.3 – Clicking on the search UI
Here's a list of fruits defined in a fruits global variable:
const fruits = ["Apple", "Banana", "Blackberries", ...]
We use a text state to store the string that the user types in at the moment. When the user clicks the Search button, the current text is sent...