-
Book Overview & Buying
-
Table Of Contents
Designing React Hooks the Right Way
By :
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.
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...
Change the font size
Change margin width
Change background colour