How to optimize lists in React? In this video, we discuss common performance mistakes and antipatterns, 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 Antipattern: custom memo comparator
17:13 Making identities stable (part 1)
22:06 Antipattern: 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: https://codesandbox.io/s/commonreactl...
Index as a key is an antipattern:   / indexasakeyisanantipattern  
CodeSandbox (solved): https://codesandbox.io/s/commonreactl...

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

Or follow me on:

Github: https://github.com/federicoterzi/
Twitter:   / terzi_federico  
Website: https://federicoterzi.com