Prevent Unnecessary Component Rerenders with React memo

What course is this from?

It's part of a playlist: http://kcd.im/hooks-and-suspense

Thanks Kent, learning a lot from your work. Appreciate ya!

@Kent, couldn't this work as a cache? Is the advantage of react-cache that it works with Suspense?

They're different use cases entirely. You could use them together if you want though.

@Kent Right, I looked into it further and see that React.memo isn't memoizing per function call, it is memoizing per re-render

https://codesandbox.io/s/8nr4xqrwj8

Here you will see the Hello component rendered twice. Each time the function is actually called, the output is not cached; however, the function isn't called each time the App is re-rendered.

@Kent I am building a simple lyrics app. A user gets a list of artists, once you click on an artist, you get a list of lyrics for that artist, and a further click on the lyric, shows the actual lyric to read.

I have a question about performance. Say I have a massive list of 6000 artists, performance wise, it isn't wise to load a list of 6000 artists on that first page render, what is the best way of achieving a list where more artists are loaded as the user scrolls down?

So initially load like 15 artists, and then as the user scrolls down the page, more artists are loaded.

@Jwan Windowing might be the answer.

What happened to the codesandbox ?! :( I got "Not Found We could not find the sandbox you're looking for."

Try again Eric, it's showing up for me.

Jwan, for displaying those artists, I recommend using react-window.