Какви правила съществуват за писане на 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>
  );
}

// Неправилен пример: извикване на hook в условие
// function MyComponentWithBadHook() {
//   if (someCondition) {
//     const [count, setCount] = useState(0); // НЕПРАВИЛНО: извикване в условие
//   }
//   // ...
// }

// Неправилен пример: извикване на hook в цикъл
// function MyComponentWithAnotherBadHook() {
//   for (let i = 0; i < 5; i++) {
//     const [value, setValue] = useState(i); // НЕПРАВИЛНО: извикване в цикъл
//   }
//   // ...
// }