Test-Driving useMemo
Let's improve the example that we saw at the beginning of the chapter with the useMemo hook to gain some performance:
const Title = ({ text, flag }) => {
const found = useMemo(() => {
console.log('created') ➀
return matchTextInArray(text))
}, [text])
console.log('updated', found) ➁
...
}
The preceding code replaces useState and useEffect with useMemo. Let's take a look at the timeline to see what difference it makes:
|----TFTF--------TF------> flag ----------a---------b----> text R----RRRR-R---------R----> updated ➁ c---------c---------c----> created ➀
A new value is created in the "created" series when the text changes, independent of the flag flips. Even better this time, there&apos...