Chapter 23 — Rendering Jarayoni

Bu — React'ni chuqur tushunish uchun eng muhim boblardan biri: render va commit fazalari, va ularga nima sabab bo'lishi.

---

23.1 Render'ga Nima Sabab Bo'ladi?

Simple Explanation

Komponent qayta render bo'lishiga uchta asosiy sabab bor: (1) o'z state'i o'zgarishi, (2) props o'zgarishi, (3) parent'i qayta render bo'lishi.

Diagram

code.text
TEXTNusxalash
01State Change
02      ↓
03Render Phase (React yangi UI tasvirini hisoblaydi)
04      ↓
05Compare (eski va yangi tasvir solishtiriladi)
06      ↓
07Commit Phase (haqiqiy DOM yangilanadi)

23.2 Render Phase vs Commit Phase

Simple Explanation

Render phase — React komponentlarni chaqirib, "qanday bo'lishi kerak" degan yangi UI tasvirini hisoblaydi (hali DOM'ga tegmaydi). Commit phase — React haqiqiy DOM'ni shu tasvirga mos qilib yangilaydi.

23.3 Keng Tarqalgan Noto'g'ri Tushunchalar

⚠️ Common Mistake
"Komponent render bo'lsa, DOM har doim o'zgaradi" — bu noto'g'ri. React yangi va eski tasvirni solishtirib (diffing), faqat haqiqiy farq bo'lgan joylarni DOM'da yangilaydi.

📝 Practice Exercises

🟡 Exercise 1 — Medium

Task: Ikkita komponent (Parent va Child) yarating, Parentda state o'zgarganda Child ham re-render bo'lishini konsol orqali kuzating (console.log yordamida).

🐛 Debugging Challenge

Stsenariy: Dasturchi "komponent render bo'lганda, albatta DOM ham o'zgaradi, shuning uchun render sonini kamaytirish har doim performance uchun foydali" deb noto'g'ri fikrlaydi.

Your Task: Bu fikrdagi xatoni toping.

<details> <summary>Solution</summary> Render — faqat hisoblash, u har doim qimmat emas. React ichki diffing orqali haqiqiy DOM o'zgarishlarini minimallashtiradi. Ba'zan optimallashtirish (masalan `useMemo`, `React.memo`) ning o'zi ham qo'shimcha xarajat (murakkablik, xotira) keltiradi — shuning uchun avval o'lchash (profiling), keyin optimallashtirish tavsiya etiladi. </details>

📌 Chapter Summary

Render — state, props yoki parent o'zgarishi natijasida sodir bo'ladi. Render phase — hisoblash, Commit phase — DOM'ga qo'llash. Render bo'lishi DOM albatta o'zgaradi degani emas.

🎯 Key Takeaways

• Render sabablari: o'z state'i, props, yoki parent re-render
• Render va Commit — ikki alohida faza
• React diffing orqali haqiqiy DOM o'zgarishlarini minimallashtiradi

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01State/Props/Parent o'zgaradi
02        ↓
03   RENDER (hisoblash)
04        ↓
05   COMPARE (diffing)
06        ↓
07   COMMIT (DOM yangilanadi, faqat farq bo'lgan joylarda)

---