useEffect: bu nədir, yan təsir hooku və React-də həyat dövrü

React-də useEffect nədir

useEffect — bu, React 16.8-də funksional komponentlərdə yan təsirləri yerinə yetirmək üçün əlavə edilmiş hookdur. Yan təsirlər dedikdə, UI renderləmə ilə birbaşbağlı olmayan əməliyyatlar başa düşülür: API-yə HTTP sorğuları, hadisə abunəlikləri, taymerlərlə iş, DOM manipulyasiyaları, loglama və üçüncü tərəf kitabxanalarla inteqrasiya.

Hooklar meydana çıxmamışdAN əvvəl bütün bu əməliyyatlar sinif komponentlərinin həyat dövrü metodlarında yerləşdirilməli idi: inisializasiya üçün componentDidMount, props dəyişikliklərinə reaksiya üçün componentDidUpdate, təmizləmə üçün componentWillUnmount. useEffect hər üç ssenarini vahid API-də birləşdirdi, burada asılılıq massivi effektin nə vaxt işə düşəcəyini müəyyən edir. Bu, mantiqanı sadələşdirdi və kodun təkrarlanmasını azaltdı, xüsusən də abunəlik ssenarilərində.

React DevTools Usage Survey (2024)-yə görə, useEffect useState-dən sonra ikinci ən populyar hookdur və React tətbiqlərinin 89%-də istifadə olunur. Tərtibatçıların əksəriyyəti onu məlumat yükləmək, xarici sistemlərlə sinxronizasiya və DOM hadisə abunəliklərini idarə etmək üçün istifadə edir.

import { useEffect } from 'react';

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

useEffect necə işləyir: effektin həyat dövrü

useEffect React renderi bitirib DOM-u yenilədikdən sonra ötürülən effekt funksiyasını işə salır. Bu, render zamanı hesablamalardan əsas fərqdir: effekt çəkməni bloklamır, bu da UX performansı üçün vacibdir. Əgər effektlər sinxron icra olunsaydı, istifadəçi məlumat yükləmə zamanı «donmuş» interfeys görərdi.

Tipik effektin həyat dövrü üç fazadan ibarətdir. Komponentin montajı zamanı React effekti icra edir. Hər yeniləmədə, əgər massivdən ən azı bir asılılıq dəyişərsə, React əvvəlcə əvvəlki effektin təmizləmə funksiyasını, sonra isə yeni effekti işə salır. Komponent demontaj edildikdə yalnız təmizləmə funksiyası icra olunur.

React Team — useEffect RFC (2024)-yə görə, useEffect-in daxili tətbiqi fiber ağacında yan təsir növbəsindən istifadə edir. Dəyişikliklər təsdiqləndikdən sonra (commit phase) React bu növbədən keçir və effekt funksiyalarını komponentdə elan edilmə ardıcıllığı ilə çağırır. Hər fiber qovşağı düzgün təmizləmə və yenidən işə salma üçün əvvəlki effektə istinad saxlayır.

useEffect asılılıq massivi

Asılılıq massivi — useEffect-in ikinci arqumenti — effektin nə vaxt yenidən işə salınacağını müəyyən edir. React Object.is vasitəsilə massivdəki hər bir dəyəri əvvəlki renderlə müqayisə edir. Əgər ən azı bir dəyər dəyişərsə, effekt yenidən işə düşür. Əgər massiv boşdursa ([]), effekt yalnız montajdan sonra bir dəfə icra olunur.

Düzgün asılılıq seçimi — useEffect ilə işin ən çətin hissəsidir. Massivə effekt daxilində istifadə olunan və renderlər arasında dəyişə bilən bütün dəyişənlər və funksiyalar daxil edilməlidir. Asılılığın buraxılması stale closures-a gətirib çıxarır — effekt əvvəlki renderdən köhnəlmiş dəyəri «görür». Lazımsız asılılıqların əlavə edilməsi həddindən artıq yenidən işə salmalara və potensial səhvlərə gətirib çıxarır.

// Asılılıqlar effektin nə vaxt yenidən işə düşəcəyini idarə edir
useEffect(() => {
    document.title = `User: ${user.name}`;
}, [user.name]); // yalnız user.name dəyişdikdə yenidən işə sal

// eslint-disable-next-line react-hooks/exhaustive-deps
// Bir asılılığı buraxsanız, köhnəlmiş məlumat alırsınız

React eslint-plugin-react-hooks qoşmasını exhaustive-deps qaydası ilə təmin edir, hansı ki, asılılıq massivinin tamlığını avtomatik yoxlayır. Meta Engineering Blog (2024)-a görə, bu qoşmanın aktivləşdirilməsi hooklarla bağlı səhvlərin sayını 72% azaldır. Nadir halları çıxmaqla, bütün exhaustive-deps xəbərdarlıqlarını şərh ilə basdırmaq əvəzinə düzəltmək tövsiyə olunur.

useEffect asılılıqsız və boş massivlə

Əgər asılılıq massivini ümumiyyətlə ötürməsənəz, useEffect hər renderdən sonra icra olunacaq. Bu, DOM ilə sinxronizasiya və ya loglama üçün faydalı ola bilər, lakin əksər hallarda bu səhvdir: effekt çox tez-tez işləyir ki, bu da performans itkisinə gətirib çıxarır. Əksər hallarda boş massiv (montaj zamanı bir dəfə) və ya konkret props/state ilə massiv ötürmək lazımdır.

Boş massiv ([]) o deməkdir ki, effekt heç bir dəyərdən asılı deyil və ciddi şəkildə bir dəfə icra olunur. Bu, sinif komponentlərində componentDidMount-un analoqudur. Lakin yadda saxlamaq lazımdır: əgər effekt daxilində props və ya state istifadə olunursa, lakin onlar asılılıq massivində göstərilməyibsə, effekt onların ilkin dəyərlərindən istifadə edəcək və yenilənmələri heç vaxt görməyəcək. Buna stale capture deyilir və tez-tez çətin aşkar edilən səhvlərin mənbəyidir.

useEffect-də effektlərin təmizlənməsi

Təmizləmə funksiyası (cleanup) — bu, useEffect-in öz callbackindən qaytara biləcəyi funksiyadır. React onu komponent demontaj edildikdə və asılılıqlar dəyişdikdə effekti yenidən işə salmazdan əvvəl çağırır. Cleanup abunəliklərin, taymerlərin, sorğuların ləğv edilməsi və azad edilməli olan istənilən resurslar üçün zəruridir.

Tipik nümunə — WebSocket abunəliyi. Montaj zamanı əlaqə yaradılır, asılılıqlar yeniləndikdə — yenidən yaradılır (cleanup köhnəni bağlayır, effekt yenisini açır), demontaj zamanı — bağlanır. Cleanup olmadan komponentin hər yenidən montajı yeni WebSocket əlaqəsi yaradar ki, bu da yaddaş sızıntısına və çoxsaylı bağlantılara gətirib çıxarır.

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

    // Təmizləmə funksiyası — demontajda və yenidən işə salınmazdan əvvəl işləyir
    return () => {
        socket.close();
    };
}, []);

React Documentation (2025)-yə görə, AbortController cleanup-də fetch sorğularını ləğv etmək üçün müasir yanaşmadır. Əgər effekt HTTP sorğusu edirsə və komponent onun tamamlanmasından əvvəl demontaj edilirsə, sorğu icra olunmağa davam edir və demontajdan sonra setState səhvə səbəb olur. Effekt daxilində AbortController yaradın və sorğunu ləğv etmək üçün cleanup-də controller.abort() çağırın.

useEffect ilə tipik səhvlər

Ən geniş yayılmış səhv — asılılıqların buraxılması. Məsələn, effekt userId propsundan istifadə edir, lakin asılılıq massivi boşdur. Nəticədə effekt userId-nin ilkin dəyəri ilə bir dəfə icra olunur və onun dəyişikliklərinə heç vaxt reaksiya vermir. Tərtibatçı komponentin yeni userId aldığını görür, lakin məlumatlar yenilənmir. eslint-plugin-react-hooks exhaustive-deps qaydası ilə belə səhvləri avtomatik aşkar edir.

• Sonsuz dövrü — effekt daxilində vəziyyətin yenilənməsi, yenidən renderə səbəb olur, bu da effekti yenidən işə salır. Həll: asılılıq massivini yoxlayın və ya setter-in funksional formasından istifadə edin.
• Sorğu yarışı (race condition) — əgər userId tez dəyişirsə, birinci userId üçün sorğu ikincidən sonra tamamlana bilər və məlumatlar səhv nəticə göstərər. Höll: cancelled bayrağı və ya AbortController istifadə edin.
• Lazımsız effektlər — əlaqəsiz mantiqaların bir useEffect-də birləşdirilməsi. React mantiqanı bir neçə effektə bölməyi tövsiyə edir, hətta eyni asılılıq massivinə malik olsalar belə.
• Unudulmuş cleanup — hadisə abunəliklərinin ləğv edilməməsi, taymerlərin təmizlənməməsi və ya sorğuların ləğv edilməməsi yaddaş sızıntılarına və demontajdan sonra setState səhvlərinə gətirib çıxarır.

// ❌ Race condition — ləğv etmə yoxdur
useEffect(() => {
    fetch(`/api/user/${userId}`).then(res => setUser(res));
}, [userId]);

// ✅ AbortController ilə düzəldildi
useEffect(() => {
    const controller = new AbortController();
    fetch(`/api/user/${userId}`, { signal: controller.signal })
        .then(res => setUser(res));
    return () => controller.abort();
}, [userId]);

Sonsuz dövrü problemini həll etmək üçün əvvəlki vəziyyət əsasında vəziyyəti yeniləyən mantiqanı useEffect-də yerləşdirməkdən çəkinin. setState-in funksional formasından istifadə edin və ya hesablamaları effektin xaricindən aparın. Əgər effekt storage və ya brauzer hadisəsinə abunə olursa, dinləyici instansiyasının bir dəfə yaradıldığına əmin olun, hər renderdə yox.