Component Memoization
Loading "Component Memoization"
Run locally for transcripts
π¨βπΌ We've got a problem. Here's how you reproduce it in our component.
In this exercise, pull up the React DevTools Profiler and start a recording.
Observe when you click the "force rerender" button, the
CityChooser and
ListItem components are rerendered even though no DOM updates were needed.
This is an unnecessary rerender and a bottleneck in our application (especially
if we want to start showing all of the results rather than just the first 500...
which we do want to do eventually). If you enable 6x throttle on the CPU (under
the Performance tab in Chrome DevTools) then you'll notice the issue is more
stark.Your job is to optimize the
ListItem component to be memoized via memo. Make
note of the before/after render times.Make sure to check both the React Profiler and the Chrome DevTools Performance
tab.
As with most of these exercises, the code changes are minimal, but the impact
is significant!
