React-da Performans: useMemo və useCallback — Nə Vaxt Lazımdır?

React-da Performans: useMemo və useCallback — Nə Vaxt Lazımdır?

Salam, developer dostum! 👋

Bakıda React ilə işləyən hər kəsin tanış olduğu bir mənzərə var: müsahibəyə gedirsən, qarşındakı senior "performans optimizasiya haqqında nə bilirsən?" deyir, sən də reflex olaraq "useMemo, useCallback istifadə edirəm" cavabını verirsən. Amma əsl sual budur: həqiqətən nə vaxt lazımdır?

Bu gün bu mövzunu real kod nümunələri ilə, Bakı developer reallığında açacağıq.

---

Problem: Premature Optimization Xəstəliyi

Bakıdakı startuplarda və outsource şirkətlərdə (Pasha Technology, STEP IT, Azerconnect kimi yerlərdə) tez-tez belə kod görürəm:

jsxKopyala
// ❌ Lazımsız useCallback istifadəsi
const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return <button onClick={handleClick}>Sayğac: {count}</button>;
};

Burada useCallback tamamilə lazımsızdır. Niyə? Çünki <button> sadə HTML elementidir — React onsuz da onu yalnız lazım olanda re-render edir. useCallback burada heç bir performans qazancı vermir, əksinə — əlavə yaddaş və müqayisə xərci yaradır.

Dan Abramov-un məşhur sözünü xatırlayaq:

"Optimizasiya etməmişdən əvvəl, əvvəlcə problemin olduğunu sübut et."

---

useMemo — Nə Vaxt Həqiqətən Lazımdır?

useMemo hesablama-intensive (bahalı) əməliyyatları cache etmək üçündür. Gəl real bir nümunəyə baxaq:

jsxKopyala
// ✅ useMemo-nun düzgün istifadəsi
const ProductList = ({ products, filterText }) => {
  // Fərz et ki, 10,000+ məhsul var (məsələn, Tap.az-ın elan bazası)
  const filteredProducts = useMemo(() => {
    console.log('Filtrasiya hesablanır...');
    return products
      .filter(p => p.name.toLowerCase().includes(filterText.toLowerCase()))
      .sort((a, b) => a.price - b.price)
      .map(p => ({
        ...p,
        formattedPrice: `${p.price.toFixed(2)} AZN`,
        isExpensive: p.price > 500
      }));
  }, [products, filterText]);

  return (
    <ul>
      {filteredProducts.map(p => (
        <li key={p.id}>{p.name} — {p.formattedPrice}</li>
      ))}
    </ul>
  );
};

Burada useMemo məntiqlidir, çünki:

• 10,000+ element üzərində filter + sort + map zənciri var
• filterText dəyişmədikcə yenidən hesablamağa ehtiyac yoxdur
• Hər keystroke-da yenidən hesablamaq UI-ı dondurar

Rəqəmlərlə danışaq:

Mən Chrome DevTools ilə test etdim:

Gördüyün kimi: 50 elementdə useMemo əslində daha yavaşdır! Hook-un özünün dependency müqayisə xərci var.

Qayda: Əgər əməliyyat 2ms-dən az çəkirsə, useMemo çox güman lazım deyil.

---

useCallback — Əsl İstifadə Yeri

useCallback yalnız bir halda real fayda verir: referans bərabərliyi (referential equality) vacib olanda. Bu adətən iki ssenariyə düşür:

1. React.memo ilə sarılmış child component-ə prop olaraq function keçəndə:

jsxKopyala
// ✅ useCallback + React.memo — klassik combo
const ExpensiveChild = React.memo(({ onItemClick, data }) => {
  console.log('ExpensiveChild renderə düşdü');
  // Ağır render məntiqini təsəvvür et
  return (
    <div>
      {data.map(item => (
        <div key={item.id} onClick={() => onItemClick(item.id)}>
          {item.name}
        </div>
      ))}
    </div>
  );
});

const Parent = () => {
  const [count, setCount] = useState(0);
  const [items] = useState(generateLargeList());

  // useCallback olmasa, hər renderda yeni function yaranacaq,
  // React.memo fərq görəcək və child yenidən renderə düşəcək
  const handleItemClick = useCallback((id) => {
    console.log('Clicked:', id);
    // analytics göndər, modal aç və s.
  }, []);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>
        Sayğac: {count}
      </button>
      <ExpensiveChild onItemClick={handleItemClick} data={items} />
    </div>
  );
};

Burada count dəyişəndə Parent yenidən render olur. useCallback olmasa, handleItemClick hər dəfə yeni referans alacaq, React.memo isə "prop dəyişib" hesab edib ExpensiveChild-ı yenidən render edəcək.

2. useEffect-in dependency array-ində function istifadə edəndə:

jsxKopyala
const useApiData = (endpoint) => {
  const fetchData = useCallback(async () => {
    const res = await fetch(`https://api.example.az${endpoint}`);
    return res.json();
  }, [endpoint]);

  useEffect(() => {
    fetchData();
  }, [fetchData]); // fetchData referansı dəyişməsə, effect yenidən işləməz
};

---

Qızıl Qaydalar — Çap Et, Monitora Yapışdır 📋

1. Əvvəlcə useMemo/useCallback olmadan yaz. Əksər hallarda React kifayət qədər sürətlidir.
2. Performans problemi varsa, əvvəlcə ölç. React DevTools Profiler və ya console.time istifadə et.
3. useMemo istifadə et: hesablama > 2ms çəkəndə, böyük siyahılar filter/sort edəndə.
4. useCallback istifadə et: React.memo-lanmış child-a function keçəndə, useEffect dependency-sində function olanda.
5. İstifadə etmə: sadə event handler-lar, ucuz hesablamalar, leaf (yarpaq) component-lər üçün.

---

Müsahibə Məsləhəti 🎯

Bakıda 1500-3500 AZN arası maaş verən şirkətlərdə React müsahibəsində bu mövzu mütləq çıxır. Sadəcə "performans üçün istifadə edirəm" demək kifayət deyil. Əgər belə cavab versən:

"useMemo-nu expensive computation cache etmək üçün istifadə edirəm, useCallback-u isə referential equality qorumaq üçün — xüsusilə React.memo ilə birlikdə. Amma hər yerə yazmıram, çünki hook-un özünün overhead-i var. Profiler ilə ölçüb qərar verirəm."

...sənin 2800+ AZN maaşa layiq olduğunu başa düşəcəklər. 😎

---

Nəticə

React artıq React 19 (2024-dən bəri stabil) ilə auto-memoization istiqamətində irəliləyir. React Compiler bir çox hallarda bu hook-ları avtomatik əlavə edir. Amma bugünkü layihələrdə hələ manual istifadə vacibdir.

Yadda saxla: ən yaxşı optimizasiya — lazımsız optimizasiyanı etməməkdir.

Sualın varsa, şərhlərdə yaz. Növbəti məqalədə React.memo deep dive edəcəyik! 🚀

---

Müəllif: Baku Stack redaksiyası | 14 Aprel 2026