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/commonreactl...
Index as a key is an anti-pattern: / index-as-a-key-is-an-a...
CodeSandbox (solved): 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: github.com/federico-terzi/
Twitter: / terzi_federico
Website: federicoterzi.com
Негізгі бет Optimizing Lists in React - Solving Performance Problems and Anti-Patterns
Пікірлер: 31