useCallback — əsas anlayışlar, React-də funksiyaların memorizasiya hook-u

React-də useCallback nədir

useCallback — React 16.8-ə əlavə edilmiş, funksiyanı memorizasiya edən hook-dur: dependency'lər dəyişməyənə qədər eyni istinadı qaytarır. useCallback olmadan komponent daxilində funksiyanın hər elanı hər renderdə yeni funksiya obyekti yaradır. Primitivlər üçün bu nəzərə çarpmır, lakin belə callback'ləri React.memo ilə optimallaşdırılmış uşaq komponentlərə ötürərkən hər yeni istinad uşaq komponentin re-renderinə səbəb olur.

Sintaktik olaraq useCallback funksiya üçün useMemo-ya ekvivalentdir: useCallback(fn, deps) — bu, useMemo(() => fn, deps) üçün qısaltmadır. React memorizasiya edilmiş funksiyanı fiber-qovşağın daxili yaddaşında saxlayır və hər renderdə dependency'ləri müqayisə edir. Dependency'lər dəyişməyibsə (hər element üçün Object.is), əvvəlki funksiya qaytarılır.

React Documentation — useCallback (2025) məlumatına görə, hər funksiyanı useCallback-ə bükmək lazım deyil. Hook-un öz qiyməti var: hook-un çağırılması, dependency'lərin müqayisəsi və dependency massivi üçün yaddaşın ayrılması. Komponent sadədirsə və React.memo ilə dərin ağacları yoxdursa — useCallback yalnız tətbiqi yavaşladacaq. Optimallaşdırma intuitiv deyil, ölçülə bilən olmalıdır.

import { useCallback } from 'react';

function Parent() {
    const [count, setCount] = useState(0);

    // Sabit istinad — deps dəyişənə qədər eyni funksiya
    const handleClick = useCallback(() => {
        setCount(prev => prev + 1);
    }, []);

    return <Child onClick={handleClick} />;
}

Funksiyaların memorizasiyası necə işləyir

useCallback-də memorizasiya funksiya çağırışının nəticəsinin keşləşdirilməsinə əsaslanır. React ilk render anında yaradılmış closure-u saxlayır və dependency'lər dəyişməz qaldıqca sonrakı renderlərdə onu qaytarır. Fiber-qovşağın daxilində hər useCallback çağırışı hook-ların bağlı siyahısında qovşaq yaradır; orada əvvəlki dependency'lər və memorizasiya edilmiş qiymət saxlanılır.

Dependency'lərin müqayisəsi prosesi ciddi şəkildə Object.is vasitəsilə aparılır — bu, obyektlərin və massivlərin dərindən yoxlanılması olmadan dayaz müqayisədir. Dependency'lərdə obyekt və ya massiv varsa, hər renderdəki yeni istinad dəyişiklik kimi qəbul ediləcək. Buna görə dependency massivində primitiv qiymətlər və ya sabit istinadlar (məsələn, useRef və ya useMemo-dan) ötürülməlidir.

React Core Team — Optimization Guide (2024) məlumatına görə, memorizasiyanın dəyəri üç komponentdən ibarətdir: hər renderdə dependency massivinin ayrılması, elementlərin Object.is vasitəsilə gəzilməsi və müqayisəsi və yenidən yaradılma zamanı garbage collector-un potensial yükü. Yüzlərlə useCallback bükməsi olan komponent üçün bu nəzərə çarpan ola bilər — buna görə hook-un istifadəsində seçicilik kritik əhəmiyyət daşıyır.

useCallback və performans

Geniş yayılmış mif odur ki, useCallback avtomatik olaraq performansı yaxşılaşdırır. Əslində, təcrid halda (React.memo olmadan) useCallback dependency'lərin müqayisəsinin dəyərinə görə tətbiqi bir qədər də yavaşladır. Hook yalnız üç ssenaridə real fayda verir: React.memo komponentlərinin re-renderinin qarşısını almaq, useEffect-də callback'lərin sabitliyi və reference equality-dən asılı olan custom hook-lara ötürmə.

Qayda sadədir: React DevTools Profiler vasitəsilə performans problemi aşkar etməyincə — useCallback istifadə etmə. React komandası dəfələrlə vurğulayıb ki, vaxtından əvvəl optimallaşdırma pisliyin köküdür. Əvvəlcə memorizasiyasız təmiz kod yaz, ölç, profiler-də darboğazı tap və yalnız bundan sonra useCallback-i həqiqətən lazım olan yerdə əlavə et.

// Ölçülə bilən optimallaşdırma: Child React.memo-ya bükülüb
const Child = React.memo(({ onClick }) => {
    console.log('Child re-render olundu');
    return <button onClick={onClick}>Click</button>;
});

function Parent() {
    const handleClick = useCallback(() => {
        console.log('basıldı');
    }, []);
    return <Child onClick={handleClick} />;
}

Dan Abramov — Before You memo() (2024) məlumatına görə, open-source layihələrdə useCallback istifadəsinin 90%-dən çoxu artıqdır. Tərtibatçılar hər funksiyanı "ehtiyat üçün" bükür, effekti ölçmürlər. Alternativ: əgər uşaq komponent ağırdırsa və onun re-renderi bahalıdırsa — React.memo + useCallback əsaslıdır. Uşaq komponent yüngüldürsə — re-render dependency'lərin müqayisəsindən ucuzdur.

useCallback-dən nə vaxt istifadə etməli

Birinci ssenari — React.memo. Uşaq komponent React.memo-ya bükülübsə və prop kimi callback funksiyası qəbul edirsə, useCallback olmadan uşaq komponent öz məlumatları dəyişməsə belə, valideynin hər renderində yenidən çəkiləcək. useCallback istinadı stabilləşdirir və React.memo re-renderi düzgün atlaya bilir.

İkinci ssenari — dependency'lərdə callback olan useEffect. Funksiya useEffect-in dependency massivinə ötürülürsə, hər yeni istinad effekti yenidən işə salacaq. useCallback istinadın sabit olmasını təmin edir və effekt yalnız real məlumatlar dəyişdikdə işləyir, hər renderdə deyil. Bu, xüsusilə subscription və sorğular üçün vacibdir.

• React.memo children — callback'lər ötürülərkən memorizasiya edilmiş uşaq komponentlərin re-renderinin qarşısını alır.
• useEffect dependencies — funksiyanı effektin dependency massivində sabitləşdirir, lazımsız yenidən işə salmaların qarşısını alır.
• Custom hook-lar — hook callback qəbul edirsə və onun reference equality-sindən asılıdırsa, useCallback mütləqdir.
• Context value — kontekstin value-sunda funksiya ötürülürsə, useMemo useCallback ilə birlikdə istinadı sabitləşdirir.

// useCallback sabit useEffect dependency üçün
const fetchData = useCallback(async (id) => {
    const res = await fetch(`/api/${id}`);
    setData(res.data);
}, []); // sabit istinad, heç vaxt yenidən yaradılmır

useEffect(() => {
    fetchData(props.id);
}, [props.id, fetchData]); // effekt yalnız props.id dəyişdikdə işə düşür

useCallback vs useMemo

useCallback və useMemo arasındakı əsas fərq ondan ibarətdir ki, hər biri nəyi memorizasiya edir. useCallback funksiyanı memorizasiya edir: useCallback(fn, deps) fn-i (eyni və ya əvvəlki versiyanı) qaytarır. useMemo funksiya çağırışının nəticəsini memorizasiya edir: useMemo(() => computeExpensive(a, b), [a, b]) hesablanmış qiyməti qaytarır, funksiyanı yox.

Texniki olaraq useCallback useMemo üzərində sintaktik şəkərdir: useCallback(fn, deps) useMemo(() => fn, deps) ilə ekvivalentdir. Bu sintaksis yalnız oxunaqlılıq üçün mövcuddur — tərtibatçının aydın görməsi üçün ki, memorizasiya edilən dəyər yox, məhz funksiyadır. useCallback və funksiya ilə useMemo arasında performans fərqi yoxdur — onlar eyni kodu yaradırlar.

// Bunlar ekvivalentdir:
const handleClick = useCallback(() => doSomething(a, b), [a, b]);
const handleClick = useMemo(() => () => doSomething(a, b), [a, b]);

useCallback ilə tipik səhvlər

Ən geniş yayılmış səhv — bütün funksiyaları uşaq komponentlərdə React.memo olmadan useCallback-ə mənasız şəkildə bükməkdir. Uşaq komponent React.memo-ya bükülməyibsə, callback-ə istinadın dəyişməsindən asılı olmayaraq, yenə də valideynin hər renderində re-render olunacaq. React.memo olmadan useCallback — faydasız xərcdir.

• React.memo olmadan useCallback — uşaq komponent yenə də re-render olunur; optimallaşdırma mənasızdır.
• Unudulmuş dependency'lər — callback daxilində deps-də göstərilməyən dəyişən işlədilirsə, callback stale closure ehtiva edir.
• Həddən artıq memorizasiya — console.log ilə trivial onClick daxil olmaqla hər funksiyanın bükülməsi.
• Dependency'lərdə obyektlər və massivlər — hər renderdəki yeni istinad dəyişiklik kimi qəbul edilir, memorizasiya faydasızdır.

// ❌ Faydasız: child-da React.memo yoxdur
const handle = useCallback(() => doStuff(), []);
<Child onClick={handle} />; // Child React.memo olmadan yenə də re-render olunur

// ❌ Stale closure: dependency çatışmır
const handle = useCallback(() => {
    console.log(count); // count həmişə 0-dır — stale closure!
}, []);

// ✅ Düzgün: dependency'ləri daxil et
const handle = useCallback(() => {
    console.log(count);
}, [count]);

useCallback-də stale closure problemi dependency massivində istifadə olunan bütün dəyişənlərin göstərilməsi ilə həll olunur. exhaustive-deps ilə eslint-plugin-react-hooks avtomatik olaraq callback gövdəsindəki bütün dəyişənlərin massivdə olmasını yoxlayır. Callback renderlər arasında dəyişməyən setState işlədirsə, onu təhlükəsiz şəkildə deps-də göstərmək olar — React setState-in sabitliyinə zəmanət verir.