React'ta hook'lar yazarken hangi kurallar vardır?

• React fonksiyonel bileşenlerin yalnızca en üst seviyesinde veya diğer özel kancalar içinde kancaları çağırın. Kancaları döngülerde, koşullarda veya iç içe fonksiyonlarda çağırmak yasaktır.
• Kancaları yalnızca React fonksiyonel bileşenleri içinde çağırın. Normal JavaScript fonksiyonları veya sınıf bileşenleri içinde çağırmayın.
• useCallback kullanımı fonksiyonların hafızaya alınmasına ve useMemo kullanımı hesaplamaların hafızaya alınmasına performansı optimize etmeye yardımcı olur.
• useEffect kullanarak yan etkileri (veri yükleme, abonelikler vb.) yönetin ve efektin çalışmasını kontrol etmek için bağımlılık dizisi belirtin.
• Her bileşenin yeniden render edilmesinde kancaların çağrı sırasına uyun. React, bu sıralamaya dayanarak durumu ve efektleri doğru şekilde bağlar.
• useEffect, useCallback, useMemo bağımlılık dizilerinde stabil bağımlılıkları kullanın. Her renderda oluşturulan nesne veya fonksiyonları gereksiz yere geçmeyin.
• Durumu paylaşmak için özel kancalar oluşturun. Özel kancaların isimleri use ile başlamalıdır.

// Doğru örnek: kancaları en üst seviyede çağırmak
function MyComponent() {
  const [count, setCount] = useState(0); // En üst seviyede

  useEffect(() => { // En üst seviyede
    document.title = `Tıkladınız ${count} kere`;
  }, [count]); // Bağımlılık dizisi

  const handleClick = useCallback(() => { // En üst seviyede
    setCount(c => c + 1);
  }, []); // Hafızaya alınmış fonksiyon

  return (
    <div>
      <p>{count} kere tıkladınız</p>
      <button onClick={handleClick}>
        Beni tıkla
      </button>
    </div>
  );
}

// Yanlış örnek: hook'un koşul içinde çağrılması
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // YANLIŞ: koşul içinde çağrı
//   }
//   // ...
// }

// Yanlış örnek: hook'un döngü içinde çağrılması
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // YANLIŞ: döngü içinde çağrı
//   }
//   // ...
// }