Қоидаҳое барои навиштани hooks дар React вуҷуд доранд?

• Тэлефануйце хукі толькі на верхнім узроўні функцыянальных кампанентаў або ўнутры іншых карыстальніцкіх хукаў. Нельга выклікаць хукі ў цыклах, умовах або ўкладзеных функцыях.
• Тэлефануйце хукі толькі ўнутры функцыянальных кампанентаў React. Нельга выклікаць іх у звычайных JavaScript-функцыях або ў класавых кампанентах.
• Выкарыстанне useCallback для мемарызацыі функцый і useMemo для мемарызацыі вылічэнняў дапамагае аптымізаваць прадукцыйнасць.
• Выкарыстанне useEffect для пабочных эфектаў (загрузка дадзеных, падпіскі і г.д.), указваючы масіў залежнасцей для кантролю выканання эфекту.
• Захаванне парадку выкліку хукаў пры кожным рэндэры кампанента. React спадзяецца на гэты парадак для правільнага звязвання стану і эфектаў.
• Выкарыстанне стабільных залежнасцей у масівах залежнасцей useEffect, useCallback, useMemo. Не перадаваць туды аб'екты або функцыі, якія ствараюцца пры кожным рэндэры без неабходнасці.
• Стварэнне ўласных карыстальніцкіх хука для паўторнага выкарыстання логікі стану паміж кампанентамі. Назвы карыстальніцкіх хукаў павінны пачынацца з use.

// Правільны прыклад: выклік хукаў на верхнім узроўні
function MyComponent() {
  const [count, setCount] = useState(0); // Выклік на верхнім узроўні

  useEffect(() => { // Выклік на верхнім узроўні
    document.title = `Вы націснулі ${count} разоў`;
  }, [count]); // Масіў залежнасцей

  const handleClick = useCallback(() => { // Выклік на верхнім узроўні
    setCount(c => c + 1);
  }, []); // Мемарызаваная функцыя

  return (
    <div>
      <p>Вы націснулі {count} разоў</p>
      <button onClick={handleClick}>
        Націсні мяне
      </button>
    </div>
  );
}

// Неправільны прыклад: выклік хукаў у ўмове
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // НЕПРАВІЛЬНА: выклік у ўмове
//   }
//   // ...
// }

// Неправільны прыклад: выклік хукаў у цыкле
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // НЕПРАВІЛЬНА: выклік у цыкле
//   }
//   // ...
// }