Chapter 24 — Virtual DOM va Reconciliation

React'ning "sehri" — Virtual DOM va reconciliation algoritmi. Bu bobda React ichida haqiqatan nima sodir bo'lishini chuqur ko'ramiz.

---

24.1 Virtual DOM Nima?

Simple Explanation

Virtual DOM — haqiqiy DOM'ning yengil, JavaScript obyektlaridan iborat nusxasi.

Diagram

code.text
TEXTNusxalash
01JSX → React.createElement() → React Element (Virtual DOM tugunlari)

24.2 Reconciliation va Diffing

Simple Explanation

Reconciliation — React'ning eski va yangi Virtual DOM daraxtlarini solishtirib, haqiqiy DOM'da qanday minimal o'zgarish qilish kerakligini aniqlash jarayoni.

Diagram

code.text
TEXTNusxalash
01Eski daraxt:  A - B - C
02Yangi daraxt: A - C - D
03 
04React taqqoslaydi:
05A — o'zgarmagan
06B — olib tashlangan
07C — o'z joyida qoldi (yoki ko'chdi)
08D — qo'shilgan

24.3 Keys va Reconciliation Bog'liqligi

Simple Explanation

key — PART 9'da ko'rganimizdek, reconciliation algoritmiga elementlarni to'g'ri moslashtirish uchun signal beradi.

📝 Practice Exercises

🔴 Exercise 1 — Hard

Task: Ichida useState bo'lgan (masalan input) komponentlar ro'yxatini yarating va keyni tasodifiy (Math.random()) qilib bering — natijada nima sodir bo'lishini kuzating va tushuntiring.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function TodoList({ todos }) {
02  return todos.map((todo) => (
03    <input key={Math.random()} defaultValue={todo.text} />
04  ));
05}

Your Task: Foydalanuvchi inputga yozganda, ro'yxat biroz keyinroq qayta render bo'lsa (masalan yangi todo qo'shilsa), yozilgan matn yo'qolib qoladi. Nega?

<details> <summary>Solution</summary> `key={Math.random()}` — har render'da yangi, tasodifiy key beradi. React buni har safar "butunlay yangi element" deb hisoblab, eski DOM node'ni (va uning ichidagi yozilgan matnni) yo'q qiladi. Yechim — barqaror key ishlatish: ```jsx <input key={todo.id} defaultValue={todo.text} /> ``` </details>

📌 Chapter Summary

Virtual DOM — UI'ning yengil JavaScript tasviri. Reconciliation — eski va yangi tasvirni solishtirib, minimal DOM o'zgarishini aniqlash jarayoni. key — bu jarayonda komponentlarni to'g'ri moslashtirish uchun asosiy signal.

🎯 Key Takeaways

• Virtual DOM — tez hisoblash uchun oraliq qatlam
• Reconciliation — diffing orqali minimal DOM o'zgarishini topadi
• Key — component identity'ni belgilaydi, uni noto'g'ri ishlatish state yo'qolishiga olib kelishi mumkin

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01JSX → React Element (Virtual DOM)
02Eski va Yangi Virtual DOM solishtiriladi (diffing)
03Faqat farq → haqiqiy DOM'ga qo'llanadi (commit)
04key — component identity uchun asosiy signal

---