Chapter 12 — useEffect

PART 0'dagi closures va async/await — useEffect'ni to'g'ri tushunish uchun zarur asos. Bu — handbookdagi eng muhim va murakkab boblardan biri.

---

12.1 useEffect Nima Uchun Kerak?

Simple Explanation

Render jarayonining o'zi "toza" bo'lishi kerak — faqat UI hisoblab chiqarilishi kerak. Lekin real ilovalarda API so'rov yuborish, timer o'rnatish, event listener qo'shish kabi "React'dan tashqari dunyo bilan sinxronlashtirish" zarurati bor.

💡 Key Idea
useEffect — bu "data fetching uchun hook" emas, balki React komponentini tashqi tizim bilan sinxronlashtirish vositasi. Fetching — bu shu tashqi tizimlardan faqat bittasi.

Example — Document title'ni yangilash

App.jsx
React JSXNusxalash
01useEffect(() => {
02  document.title = `${count} ta layk`;
03}, [count]); // faqat count o'zgarganda ishga tushadi

12.2 Cleanup Funksiyasi

Example

App.jsx
React JSXNusxalash
01useEffect(() => {
02  const id = setInterval(() => {
03    console.log("tick");
04  }, 1000);
05 
06  return () => clearInterval(id); // cleanup: komponent unmount bo'lganda ishga tushadi
07}, []);

12.3 Data Fetching va Race Condition

Example — Data fetching

App.jsx
React JSXNusxalash
01useEffect(() => {
02  async function loadUser() {
03    const res = await fetch(`/api/users/${userId}`);
04    const data = await res.json();
05    setUser(data);
06  }
07  loadUser();
08}, [userId]);

Example — Race condition yechimi (AbortController)

App.jsx
React JSXNusxalash
01useEffect(() => {
02  const controller = new AbortController();
03 
04  async function search() {
05    try {
06      const res = await fetch(`/api/search?q=${query}`, { signal: controller.signal });
07      const data = await res.json();
08      setResults(data);
09    } catch (err) {
10      if (err.name !== "AbortError") throw err;
11    }
12  }
13  search();
14 
15  return () => controller.abort(); // eski so'rovni bekor qiladi
16}, [query]);

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Komponent yuklanganda konsolga "Komponent yuklandi" deb chiqaradigan effect yozing.

🟡 Exercise 2 — Medium

Task: Sekundomer (stopwatch) komponent — setInterval va cleanup bilan.

🔴 Exercise 3 — Hard

Task: Qidiruv maydoni — foydalanuvchi yozgan sari API'ga so'rov yuboradigan, lekin eski so'rovlarni bekor qiladigan (debounce + AbortController) komponent.

🔮 Predict the Output

App.jsx
React JSXNusxalash
01const [count, setCount] = useState(0);
02 
03useEffect(() => {
04  setCount(count + 1);
05}, [count]);

🧠 Think first! Bu kod nima qiladi?

<details> <summary>Answer</summary> Cheksiz tsikl (infinite loop)!

Why?
count o'zgaradi → effect qayta ishga tushadi → countni yana o'zgartiradi → va hokazo, chunki count ham dependency, ham effect ichida o'zgartirilmoqda.

</details>

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01useEffect(() => {
02  const id = setInterval(() => {
03    console.log(count); // har doim boshlang'ich qiymatni chiqaradi
04  }, 1000);
05}, []);

Your Task: Ikkita muammoni toping.

<details> <summary>Solution</summary> Ikki muammo bor: 1. `count` — stale closure, chunki dependency array bo'sh, effect faqat bir marta ishga tushadi va o'sha paytdagi `count`ni "eslab qoladi". 2. Cleanup yo'q — komponent unmount bo'lganda ham interval davom etaveradi (memory leak).

Yechim:

App.jsx
React JSXNusxalash
01useEffect(() => {
02  const id = setInterval(() => {
03    console.log(count);
04  }, 1000);
05  return () => clearInterval(id);
06}, [count]);

</details>

📌 Chapter Summary

useEffect — komponentni tashqi tizimlar (API, DOM, timer, subscription) bilan sinxronlashtirish vositasi. Dependency array — effect qachon qayta ishga tushishini belgilaydi. Cleanup funksiya — resurslarni to'g'ri tozalash uchun zarur.

🎯 Key Takeaways

• useEffect faqat "data fetching uchun" emas — sinxronlashtirish uchun
• Bo'sh dependency array ([]) — faqat mount'da bir marta ishga tushadi
• Cleanup funksiyasi — memory leak va eskirgan effektlarning oldini oladi
• AbortController — race condition'larni yechish uchun standart vosita

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01useEffect(() => {...});                              // har render'da
02useEffect(() => {...}, []);                           // faqat mount'da
03useEffect(() => {...}, [dep]);                        // dependency asosida
04useEffect(() => { return () => {...}; }, []);         // cleanup bilan

---