API Referansı
Genel Bakış

Hook'ların Kuralları

Hook’lar JavaScript fonksiyonları kullanılarak tanımlanır, ancak nerede çağrılabilecekleri konusunda kısıtlamaları olan özel bir yeniden kullanılabilir UI mantığı türünü temsil ederler.

Hook’ları yalnızca en üst düzeyde çağırın

İsimleri use ile başlayan fonksiyonlar React’te Hooks olarak adlandırılır.

Hook’ları döngüler, koşullar, iç içe fonksiyonlar veya try/catch/finally blokları içinde çağırmayın. Bunun yerine, Hook’ları her zaman React fonksiyonunuzun en üst seviyesinde, herhangi bir erken dönüşten önce kullanın. Hook’ları yalnızca React bir fonksiyon bileşenini işlerken çağırabilirsiniz:

function Counter() {
  // ✅ İyi: bir işlev bileşeninde üst düzey
  const [count, setCount] = useState(0);
  // ...
}

function useWindowWidth() {
  // ✅ İyi: özel bir Hook içinde üst düzey
  const [width, setWidth] = useState(window.innerWidth);
  // ...
}

Hook’ları (use ile başlayan fonksiyonlar) başka herhangi bir durumda çağırmak desteklenmez, örneğin:

  • 🔴 Hook’ları koşulların veya döngülerin içinde çağırmayın.
  • 🔴 Hook’ları koşullu bir return ifadesinden sonra çağırmayın.
  • 🔴 Hook’ları olay işleyicilerinde çağırmayın.
  • 🔴 Hook’ları sınıf bileşenlerinde çağırmayın.
  • 🔴 Hook’ları useMemo, useReducer veya useEffect’e geçirilen fonksiyonların içinde çağırmayın.
  • 🔴 Hook’ları try/catch/finally blokları içinde çağırmayın.

Bu kuralları ihlal ederseniz, bu hatayı görebilirsiniz.

function Bad({ cond }) {
  if (cond) {
    // 🔴 Kötü: bir durumun içinde (düzeltmek için, dışarı taşıyın!)
    const theme = useContext(ThemeContext);
  }
  // ...
}

function Bad() {
  for (let i = 0; i < 10; i++) {
    // 🔴 Kötü: bir döngünün içinde (düzeltmek için dışarı taşıyın!)
    const theme = useContext(ThemeContext);
  }
  // ...
}

function Bad({ cond }) {
  if (cond) {
    return;
  }
  // 🔴 Kötü: koşullu dönüşten sonra (düzeltmek için dönüşten önce taşıyın!)
  const theme = useContext(ThemeContext);
  // ...
}

function Bad() {
  function handleClick() {
    // 🔴 Kötü: bir olay işleyicisinin içinde (düzeltmek için dışarı taşıyın!)
    const theme = useContext(ThemeContext);
  }
  // ...
}

function Bad() {
  const style = useMemo(() => {
    // 🔴 Kötü: useMemo'nun içinde (düzeltmek için dışarı taşıyın!)
    const theme = useContext(ThemeContext);
    return createStyle(theme);
  });
  // ...
}

class Bad extends React.Component {
  render() {
    // 🔴 Kötü: bir sınıf bileşeninin içinde (düzeltmek için, sınıf yerine bir fonksiyon bileşeni yazın!)
    useEffect(() => {})
    // ...
  }
}

function Bad() {
  try {
    // 🔴 Kötü: try/catch/finally bloğu içinde (düzeltmek için dışarı taşıyın!)
    const [x, setX] = useState(0);
  } catch {
    const [x, setX] = useState(1);
  }
}

Bu hataları yakalamak için eslint-plugin-react-hooks eklentisini kullanabilirsiniz.

Not

Özel Hook’lar diğer Hook’ları çağırabilir (tüm amaçları budur). Bu işe yarar çünkü özel Hook’ların da yalnızca bir işlev bileşeni işlenirken çağrılması gerekir.

Hook’ları yalnızca React fonksiyonlarından çağırın

Hook’ları normal JavaScript fonksiyonlarından çağırmayın. Bunun yerine şunları yapabilirsiniz:

✅ React fonksiyon bileşenlerinden Hook’ları çağırın. ✅ Hook’ları özel Hook’lar’dan çağırın.

Bu kuralı izleyerek, bir bileşendeki tüm durum mantığının kaynak kodundan açıkça görülebilmesini sağlarsınız.

function FriendList() {
  const [onlineStatus, setOnlineStatus] = useOnlineStatus(); // ✅
}

function setOnlineStatus() { // ❌ Bir bileşen veya özel Hook değil!
  const [onlineStatus, setOnlineStatus] = useOnlineStatus();
}
ÖncekiReact calls Components and Hooks