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