useDeferredValue + memo
Loading "useDeferredValue and Memo"
Run locally for transcripts
π¨βπΌ We've got a performance problem with our
Card
component in this UI. (π§ββοΈ
actually, I just added an arbitrary slowdown to simulate a problem to keep this
exercise simple while still teaching the lesson). As a result, every time we
type in the search
the characters are not responsive.You might think that you can get away with just adding
memo
around the Card
and we absolutely want you to do that, but once you try, you'll notice that
typing a bunch in the search and then clearing the search is still a really slow
experience. We need concurrent rendering!So please
memo
-ize the Card
component, and add useDeferredValue
to the
query
you use to filter the cards and check the performance difference.