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

Federico Terzi
Federico Terzi
8.4 هزار بار بازدید - 3 سال پیش - How to optimize lists in
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: https://codesandbox.io/s/commonreactl...
Index as a key is an anti-pattern: Medium: index-as-a-key-is-an-anti-pattern
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/federico-terzi/
Twitter: Twitter: terzi_federico
Website: https://federicoterzi.com
3 سال پیش در تاریخ 1400/11/02 منتشر شده است.
8,492 بـار بازدید شده
... بیشتر