Advanced React

Chapter 6 · 8 examples

Deep dive into diffing and reconciliation

The Mysterious Bug · Diffing and Reconciliation · Reconciliation and state update · Why we can't define components inside other components · The answer to the mystery · Reconciliation and arrays · Reconciliation and "key" · "Key" attribute and memoized list · State reset technique · Using "key" to force reuse of an existing element · Why we don't need keys outside of arrays? · Dynamic arrays and normal elements together

Watch chapter 6 on YouTube
  1. Example 1Conditional inputs share state
  2. Example 2Components defined inside components
  3. Example 3Fixing the bug with arrays
  4. Example 4Key identifies list items
  5. Example 5Key with memoized lists
  6. Example 6State reset with key
  7. Example 7Force reuse with shared key
  8. Example 8Keys outside dynamic arrays