Mastering React Reconciliation - Advanced React course, Episode 6

👉 Based on the "Advanced React" book, Chapter 6: https://www.advanced-react.com

🎬 Episode 6: Deep dive into diffing and reconciliation in React

00:34 What's in the course
01:31 The problem we're going to solve
03:24 React reconciliation & diffing - mounting
05:45 React reconciliation & state update
08:37 Why we can't create components inside other components
09:48 The answer to the mystery
11:18 Reconciliation & arrays
12:58 Reconciliation & keys
14:47 Key & memoized list items
18:34 State reset technique
20:35 Using "key" to force reuse of an existing element
21:30 Why we don't need keys outside of arrays?

👩🏻‍💻 Code examples:

1. Initial mystery: https://advanced-react.com/examples/0...
2. Components inside other components: https://advanced-react.com/examples/0...
3. Fix with re-positioning of inputs: https://www.advanced-react.com/exampl...
4. Index as key: https://www.advanced-react.com/exampl...
5. ID as key: https://www.advanced-react.com/exampl...
6. State reset: https://www.advanced-react.com/exampl...
7. Reuse of element with key: https://www.advanced-react.com/exampl...