useEffect: bu nima, yon ta'sir huki va React-da hayotiy sikl

React-da useEffect nima

useEffect — bu React 16.8 da funksional komponentlarda yon ta'sirlarni bajarish uchun qo'shilgan huk. Yon ta'sirlar deganda UI renderlash bilan bevosita bog'liq bo'lmagan operatsiyalar tushuniladi: API-ga HTTP so'rovlar, hodisalarga obuna bo'lish, taymerlar bilan ishlash, DOM manipulyatsiyalari, loglash va uchinchi tomon kutubxonalari bilan integratsiya.

Huklar paydo bo'lishidan oldin, bu operatsiyalarning barchasini sinf komponentlarining hayotiy sikl metodlariga joylashtirish kerak edi: ishga tushirish uchun componentDidMount, props o'zgarishlariga reaksiya uchun componentDidUpdate, tozalash uchun componentWillUnmount. useEffect uchtala stsenariyni yagona API-da birlashtirdi, bunda bog'liqlik massivi effekt qachon ishga tushishini aniqlaydi. Bu mantiqni soddalashtirdi va kod takrorlanishini kamaytirdi, ayniqsa obuna stsenariylarida.

React DevTools Usage Survey (2024)-ga ko'ra, useEffect useState-dan keyin ikkinchi eng mashhur huk bo'lib, React ilovalarining 89 foizida qo'llaniladi. Dasturchilarning aksariyati undan ma'lumotlarni yuklash, tashqi tizimlar bilan sinxronizatsiya va DOM hodisalariga obunalarni boshqarish uchun foydalanadi.

import { useEffect } from 'react';

function UserProfile({ userId }) {
    useEffect(() => {
        fetch(`/api/users/${userId}`)
            .then(res => res.json())
            .then(data => setUser(data));
    }, [userId]);
}

useEffect qanday ishlaydi: effektning hayotiy sikli

useEffect React renderlashni tugatib DOM-ni yangilaganidan keyin berilgan effekt funksiyasini ishga tushiradi. Bu renderlash vaqtidagi hisoblashlardan asosiy farq: effekt chizishni bloklamaydi, bu UX samaradorligi uchun muhim. Agar effektlar sinxron bajarilsa, foydalanuvchi ma'lumotlarni yuklash vaqtida «muzlab qolgan» interfeysni ko'rar edi.

Odatiy effektning hayotiy sikli uch fazadan iborat. Komponentni montaj qilishda React effektni bajaradi. Har bir yangilanishda, agar massivdagi kamida bitta bog'liqlik o'zgargan bo'lsa, React avval oldingi effektning tozalash funksiyasini, so'ngra yangi effektni ishga tushiradi. Komponent demontaj qilinganda faqat tozalash funksiyasi bajariladi.

React Team — useEffect RFC (2024)-ga ko'ra, useEffect-ning ichki tatbiqi fiber daraxtidagi yon ta'sirlar navbatidan foydalanadi. O'zgarishlar tasdiqlangandan keyin (commit phase) React bu navbatdan o'tadi va effekt funksiyalarini komponentda e'lon qilingan tartibda chaqiradi. Har bir fiber tuguni oldingi effektga havolani saqlaydi, bu to'g'ri tozalash va qayta ishga tushirish uchun kerak.

useEffect bog'liqlik massivi

Bog'liqlik massivi — useEffect-ning ikkinchi argumenti — effekt qachon qayta ishga tushirilishini aniqlaydi. React Object.is yordamida massivdagi har bir qiymatni oldingi render bilan solishtiradi. Agar kamida bitta qiymat o'zgargan bo'lsa, effekt qayta ishga tushadi. Agar massiv bo'sh bo'lsa ([]), effekt faqat montajdan keyin bir marta bajariladi.

To'g'ri bog'liqlik tanlash — useEffect bilan ishlashning eng qiyin qismi. Massivga effekt ichida ishlatiladigan va renderlar orasida o'zgarishi mumkin bo'lgan barcha o'zgaruvchilar va funksiyalar kiritilishi kerak. Bog'liqlikni o'tkazib yuborish stale closures-ga olib keladi — effekt oldingi renderdan eskirgan qiymatni «ko'radi». Ortiqcha bog'liqliklarni qo'shish haddan tashqari qayta ishga tushirishlarga va potentsial xatolarga olib keladi.

// Bog'liqliklar effekt qachon qayta ishga tushishini boshqaradi
useEffect(() => {
    document.title = `User: ${user.name}`;
}, [user.name]); // faqat user.name o'zgarganda qayta ishga tush

// eslint-disable-next-line react-hooks/exhaustive-deps
// Agar bog'liqlikni o'tkazib yuborsangiz, eskirgan ma'lumot olasiz

React eslint-plugin-react-hooks plaginini exhaustive-deps qoidasi bilan ta'minlaydi, u bog'liqlik massivining to'liqligini avtomatik tekshiradi. Meta Engineering Blog (2024)-ga ko'ra, ushbu plagin faollashtirilganda huklar bilan bog'liq xatolar soni 72 foizga kamayadi. Barcha exhaustive-deps ogohlantirishlarini izoh bilan bosish o'rniga tuzatish tavsiya etiladi, maxsus mantiqli kamdan-kam holatlar bundan mustasno.

useEffect bog'liqliksiz va bo'sh massiv bilan

Agar bog'liqlik massivini umuman o'tkazmasangiz, useEffect har bir renderdan keyin bajariladi. Bu DOM bilan sinxronizatsiya yoki loglash uchun foydali bo'lishi mumkin, lekin ko'pincha xatodir: effekt juda tez-tez ishlaydi, bu esa samaradorlikni pasaytiradi. Ko'p hollarda bo'sh massiv (montajda bir marta) yoki aniq props/state bilan massiv o'tkazish kerak.

Bo'sh massiv ([]) effekt hech qanday qiymatga bog'liq emasligini va qat'iy bir marta bajarilishini anglatadi. Bu sinf komponentlaridagi componentDidMount-ning analogidir. Ammo esda tutish kerak: agar effekt ichida props yoki holat ishlatilsa-yu, lekin ular bog'liqlik massivida ko'rsatilmagan bo'lsa, effekt ularning boshlang'ich qiymatlarini ishlatadi va yangilanishlarni hech qachon ko'rmaydi. Bu stale capture deb ataladi va ko'pincha qiyin aniqlanadigan xatolar manbai hisoblanadi.

useEffect-da effektlarni tozalash

Tozalash funksiyasi (cleanup) — bu useEffect o'z callback-dan qaytarishi mumkin bo'lgan funksiyadir. React uni komponent demontaj qilinganda va bog'liqliklar o'zgarganda effektni qayta ishga tushirishdan oldin chaqiradi. Cleanup obunalar, taymerlar, so'rovlar va bo'shatilishi kerak bo'lgan har qanday resurslarni bekor qilish uchun zarur.

Oddiy misol — WebSocket obunasi. Montajda ulanish yaratiladi, bog'liqliklar yangilanganda — qayta yaratiladi (cleanup eskisini yopadi, effekt yangisini ochadi), demontajda — yopiladi. Cleanupsiz komponentning har bir qayta montaji yangi WebSocket ulanishini yaratadi, bu esa xotira oqishiga va ko'p sonli ulanishlarga olib keladi.

useEffect(() => {
    const socket = new WebSocket('wss://api.example.com');
    socket.onmessage = event => setData(event.data);

    // Tozalash funksiyasi — demontajda va qayta ishga tushirishdan oldin ishlaydi
    return () => {
        socket.close();
    };
}, []);

React Documentation (2025)-ga ko'ra, AbortController — cleanup-da fetch so'rovlarini bekor qilishning zamonaviy usuli. Agar effekt HTTP so'rovi yuborsa va komponent uning tugashidan oldin demontaj qilinsa, so'rov bajarilishda davom etadi va demontajdan keyin setState xatoga olib keladi. Effekt ichida AbortController yarating va so'rovni bekor qilish uchun cleanup-da controller.abort() ni chaqiring.

useEffect bilan odatiy xatolar

Eng keng tarqalgan xato — bog'liqliklarni o'tkazib yuborish. Masalan, effekt userId props-dan foydalanadi, lekin bog'liqlik massivi bo'sh. Natijada effekt userId-ning boshlang'ich qiymati bilan bir marta bajariladi va uning o'zgarishlariga hech qachon reaksiya bermaydi. Dasturchi komponent yangi userId olayotganini ko'radi, lekin ma'lumotlar yangilanmaydi. eslint-plugin-react-hooks exhaustive-deps qoidasi bilan bunday xatolarni avtomatik aniqlaydi.

• Cheksiz sikl — effekt ichida holatni yangilash, qayta renderlashga sabab bo'ladi, bu esa effektni qayta ishga tushiradi. Yechim: bog'liqlik massivini tekshiring yoki setter-ning funksional shaklidan foydalaning.
• So'rov poygasi (race condition) — agar userId tez o'zgarsa, birinchi userId uchun so'rov ikkinchisidan keyin tugashi mumkin va ma'lumotlar noto'g'ri natijani ko'rsatadi. Yechim: cancelled bayrog'i yoki AbortController-dan foydalaning.
• Ortiqcha effektlar — bog'liq bo'lmagan mantiqlarni bitta useEffect-da birlashtirish. React mantiqni bir nechta effektlarga ajratishni tavsiya qiladi, hatto ular bir xil bog'liqlik massiviga ega bo'lsa ham.
• Unutilgan cleanup — hodisalardan chiqish, taymerlarni tozalash yoki so'rovlarni bekor qilmaslik xotira oqishlariga va demontajdan keyin setState xatolariga olib keladi.

// ❌ Race condition — bekor qilish yo'q
useEffect(() => {
    fetch(`/api/user/${userId}`).then(res => setUser(res));
}, [userId]);

// ✅ AbortController bilan tuzatildi
useEffect(() => {
    const controller = new AbortController();
    fetch(`/api/user/${userId}`, { signal: controller.signal })
        .then(res => setUser(res));
    return () => controller.abort();
}, [userId]);

Cheksiz sikl muammosini hal qilish uchun oldingi holatga asoslangan holda holatni yangilaydigan mantiqni useEffect ichiga joylashtirishdan saqlaning. setState-ning funksional shaklidan foydalaning yoki hisoblashlarni effektdan tashqarida bajaring. Agar effekt storage yoki brauzer hodisasiga obuna bo'lsa, tinglovchi instansiyasi bir marta yaratilishiga ishonch hosil qiling, har bir renderda emas.