Mastering React Reconciliation - Advanced React course, Episode 6

Advanced React course

👉 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/06/01 2. Components inside other components: https://advanced-react.com/examples/06/02 3. Fix with re-positioning of inputs: https://www.advanced-react.com/examples/06/03 4. Index as key: https://www.advanced-react.com/examples/06/04 5. ID as key: https://www.advanced-react.com/examples/06/05 6. State reset: https://www.advanced-react.com/examples/06/06 7. Reuse of element with key: https://www.advanced-react.com/examples/06/07

About the course

Advanced concepts, strategies, techniques, patterns and in-depth investigations in React. Based on the chapters of the "Advanced React" book: https://advanced-react.com/