Chapter 37 — Suhbatga Tayyorgarlik

Bu bobda daraja bo'yicha guruhlangan React interview savollari — har biri chuqur tushuntirish va keng tarqalgan noto'g'ri javob bilan.

---

37.1 🟢 Beginner Savollar

Savol: Props va State orasidagi farq nima?

🧠 Think First! Javobni o'qishdan oldin o'zingiz javob berishga harakat qiling.

<details> <summary>Answer</summary> Props — parentdan childga uzatiladigan, read-only ma'lumot. State — komponentning o'z ichki, o'zgarishi mumkin bo'lgan xotirasi.

Deep Explanation: Props komponent tashqarisidan boshqariladi va komponent uni o'zgartira olmaydi. State esa komponentning o'zi tomonidan boshqariladi va useState/setState orqali yangilanadi.

Common Wrong Answer: "Props va State bir xil narsa, ikkalasi ham ma'lumot saqlaydi" — bu ularning kelib chiqishi va o'zgaruvchanlik xususiyatidagi asosiy farqni e'tiborsiz qoldiradi.

</details>

37.2 🟡 Intermediate Savollar

Savol: useEffect'ning dependency array'i qanday ishlaydi va uni noto'g'ri belgilash qanday muammolarga olib keladi?

<details> <summary>Answer</summary> Dependency array — effect qachon qayta ishga tushishini belgilaydi. Bo'sh massiv — faqat mount'da; massiv berilmasa — har render'da; qiymatlar bilan — o'sha qiymatlar o'zgarganda.

Deep Explanation: Noto'g'ri belgilangan dependency — infinite loop (agar effect ichida dependency'ni o'zgartirsa) yoki stale closure (agar kerakli dependency qo'shilmasa) muammolariga olib kelishi mumkin.

Common Wrong Answer: "useEffect faqat data fetching uchun ishlatiladi" — bu PART 12'da ko'rilgan noto'g'ri, keng tarqalgan tushuncha.

</details>

37.3 🔴 Advanced Savollar

Savol: React reconciliation jarayonida key prop qanday rol o'ynaydi va uni noto'g'ri ishlatish qanday oqibatlarga olib kelishi mumkin?

<details> <summary>Answer</summary> `key` — React'ga ro'yxat elementlarini "kim kim ekanini" aniqlashga yordam beradi. Reconciliation paytida, bir xil turdagi va bir xil key'ga ega element "davomiyligi" saqlanadi (state, DOM node saqlanadi); key o'zgarsa, element butunlay yo'q qilinib, yangisi yaratiladi.

Deep Explanation: Bu ayniqsa ichki state'ga (masalan input) ega komponentlar ro'yxatida muhim — noto'g'ri key (masalan index) tartib o'zgarganda state'ning "noto'g'ri" elementga bog'lanib qolishiga olib kelishi mumkin.

Common Wrong Answer: "key faqat React'ning ichki ogohlantirishini yo'qotish uchun kerak" — bu key'ning haqiqiy, funksional ahamiyatini kamsitadi.

</details>

37.4 🟣 Senior-Level Savollar

Savol: Katta React ilovasida performance muammosi paydo bo'lganda, uni qanday tizimli tarzda diagnostika qilasiz?

<details> <summary>Answer</summary> Birinchi navbatda React DevTools Profiler orqali qaysi komponent ko'p vaqt olayotganini va nechta marta re-render bo'layotganini o'lchash kerak. So'ng — sabab (keraksiz re-render, qimmat hisoblash, katta ro'yxat) aniqlanadi va mos yechim (React.memo, useMemo, useCallback, virtualization, code splitting) tanlanadi.

Deep Explanation: Muhim tamoyil — "measure first, optimize when necessary". Ko'r-ko'rona optimallashtirish (hamma joyga memo qo'yish) ko'pincha kodni murakkablashtiradi, lekin real foyda bermaydi.

Common Wrong Answer: "Har doim barcha komponentlarga React.memo qo'shish kerak" — bu PART 25'da ko'rilgan, keng tarqalgan noto'g'ri yondashuv.

</details>

📝 Practice Exercises

🟣 Exercise 1 — Challenge

Task: O'zingiz uchun 5 ta qo'shimcha React interview savolini yozing (har biriga Question, Answer, Deep Explanation, Common Wrong Answer bilan).

🐛 Debugging Challenge (Interview Uslubida)

Savol: Quyidagi kodda nechta xato bor?

App.jsx
React JSXNusxalash
01function Counter(props) {
02  props.count++;
03  const [items, setItems] = useState([]);
04  useEffect(() => {
05    setItems([...items, props.count]);
06  });
07  return <p>{items.length}</p>;
08}

Your Task: Barcha xatolarni toping.

<details> <summary>Solution</summary> Kamida 3 ta xato bor: 1. `props.count++` — props mutation (PART 5) 2. `useEffect` dependency array yo'q — har render'da ishga tushadi 3. `setItems([...items, ...])` effect ichida, dependency'siz — bu `items`ning o'zgarishi effect'ni yana ishga tushirib, infinite loop yaratadi (PART 12) </details>

📌 Chapter Summary

Interview savollari — nafaqat sintaksisni, balki "nega" va "qanday ichki ishlaydi" degan chuqur tushunishni sinaydi. Har bir javobda keng tarqalgan noto'g'ri tushunchalarni bilish — muhim ustunlik beradi.

🎯 Key Takeaways

• Har bir javobni "nima, nega, qanday" tuzilishida bering
• Keng tarqalgan noto'g'ri tushunchalarni oldindan bilish — ishonchni oshiradi
• Amaliy debugging ko'nikmasi — nazariy bilimdan kam emas muhim

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01🟢 Beginner: Props vs State, JSX, Components
02🟡 Intermediate: useEffect, Lists&Keys, Forms
03🔴 Advanced: Reconciliation, Context performance
04🟣 Senior: Architecture, Performance diagnostics

---