Optimizing Lists in React - Solving Performance Problems and Anti-Patterns

How to optimize lists in React? In this video, we discuss common performance mistakes and anti-patterns, along with profiling techniques you can use to solve them.

00:00 Introduction
01:07 Starting from a problematic example
03:02 Missing key prop
05:55 Profiling
08:03 Analyzing the profiler's report
10:23 React.memo
11:15 Memoizing our ListItem
12:34 Shallow comparison
14:38 Anti-pattern: custom memo comparator
17:13 Making identities stable (part 1)
22:06 Anti-pattern: excluding dependency inside useCallback
23:22 Making identities stable (part 2)
24:20 useState functional updates
26:28 What about complex states?
28:35 Virtualized lists
30:34 Conclusion

Links:

CodeSandbox: codesandbox.io/s/commonreactlistmistakes-9f3ex
Index as a key is an anti-pattern: robinpokorny.medium.com/index-as-a-key-is-an-anti-…
CodeSandbox (solved): codesandbox.io/s/commonreactlistmistakes-solved-7s…

Thank you very much for watching! If you liked the video, please consider subscribing to the channel :)

Or follow me on:

Github: github.com/federico-terzi/
Twitter: twitter.com/terzi_federico
Website: federicoterzi.com/