⚡ useCallback Nedir?

• React hook’udur, fonksiyonları memoize etmek için kullanılır.
• Amaç: Child component’lere props olarak gönderilen fonksiyonların gereksiz yeniden oluşturulmasını önlemek ve performansı artırmak.
• useMemo ile benzer mantıkta çalışır ama değer yerine fonksiyon saklar.

⚡ Temel Kullanım

import { useState, useCallback } from "react";

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

  // Fonksiyon sadece count değiştiğinde yeniden oluşturulur
  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []); // bağımlılık dizisi boşsa, ilk renderdan sonra değişmez

  return (
    <div>
      <p>Count: {count}</p>
      <Button onClick={increment}>Arttır</Button>
    </div>
  );
}

const Button = React.memo(({ onClick, children }) => {
  console.log("Button render oldu");
  return <button onClick={onClick}>{children}</button>;
});

• useCallback(() => {...}, [dependencies])
• Fonksiyon, bağımlılıklar değişmediği sürece yeniden oluşturulmaz.
• Özellikle React.memo ile birlikte kullanıldığında performans sağlar.

⚡ Notlar

• Fonksiyonlar child component’lere props olarak giderken gereksiz render’ı önler.
• useCallback tek başına state güncellemez, sadece fonksiyon referansını korur.
• Çok küçük uygulamalarda kullanımı genellikle gerekli değildir; performans kritik alanlarda önemlidir.