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