Performance and Memoization

Part of the React course

Your app has a table with two thousand rows and a search box above it. Every keystroke feels heavy: you type, and half a second later the letter shows up. Nothing is broken, and the code looks reasonable. What is happening is that a single character in the search box makes React run every one of those two thousand row components again, work out that almost none of them changed, and then update the screen.

React re-renders freely on purpose, and most of the time that is exactly right, because running a component function is cheap and React is good at working out the minimum it needs to change on the page. Occasionally it is not right, and for those cases React gives you three tools to say "this result has not changed, reuse the previous one".