React-də hook-lar yazmaq üçün hansı qaydalar mövcuddur?

• Hookları yalnızca funksional komponentlərin yuxarı səviyyəsində və ya digər xüsusi hooklar daxilində çağırın. Hookları döngələrdə, şərtlərdə və ya iç-içə funksiyalarda çağırmayın.
• Hookları yalnız React funksional komponentləri daxilində çağırın. Onları adi JavaScript funksiyalarında və ya sinif komponentlərində çağırmayın.
• useCallback funksiyaların yadda saxlanmasına və useMemo hesablamaların yadda saxlanmasına kömək edir və performansı optimallaşdırmağa kömək edir.
• useEffect yan təsirlər üçün istifadə olunur (məlumatların yüklənməsi, abunəliklər və s.), və effektin icrasını idarə etmək üçün asılılıq massivini göstərin.
• Hər komponentin yenidən renderində hookların çağırılma ardıcıllığını qoruyun. React bu ardıcıllığa əsaslanaraq vəziyyət və effektləri düzgün əlaqələndirir.
• useEffect, useCallback, useMemo üçün stabilliyi təmin edən asılılıq massivlərindən istifadə edin. Hər renderdə yaradılan obyekt və ya funksiyaları lazımsız yerə ötürməyin.
• Vəziyyəti paylaşmaq üçün xüsusi hooklar yaradın. Xüsusi hookların adları use ilə başlamalıdır.

// Düzgün nümunə: hookları yuxarı səviyyədə çağırmaq
function MyComponent() {
  const [count, setCount] = useState(0); // Yuxarı səviyyədə

  useEffect(() => { // Yuxarı səviyyədə
    document.title = `Siz ${count} dəfə kliklədiniz`;
  }, [count]); // Asılılıq massiv

  const handleClick = useCallback(() => { // Yuxarı səviyyədə
    setCount(c => c + 1);
  }, []); // Yadda saxlanmış funksiya

  return (
    <div>
      <p>Siz {count} dəfə kliklədiniz</p>
      <button onClick={handleClick}>
        Məni kliklə
      </button>
    </div>
  );
}

// Yanlış nümunə: hook-u şərtdə çağırmaq
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // YANLIŞ: şərtdə çağırış
//   }
//   // ...
// }

// Yanlış nümunə: hook-u döngüdə çağırmaq
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // YANLIŞ: döngüdə çağırış
//   }
//   // ...
// }