Какие правила существуют для написания хуков в 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); // НЕПРАВИЛЬНО: вызов в цикле
//   }
//   // ...
// }