Правила использования Hooks

Hooks в React работают только при соблюдении двух строгих правил. Эти правила гарантируют, что React может правильно отслеживать состояние и эффекты между вызовами компонентов.

Правило 1: Вызывайте Hooks только на верхнем уровне

Никогда не вызывайте хуки внутри условий, циклов, вложенных функций или тернарных операторов. Это нарушает порядок вызова хуков между рендерами, что приводит к ошибкам.

Неправильно:

if (condition) {
  const [state, setState] = useState(0);
}

Правильно:

const [state, setState] = useState(0);

Если вам нужно условное поведение — применяйте его внутри тела хука или после его вызова, но не вокруг самого вызова.

Правило 2: Вызывайте Hooks только из функциональных компонентов или других Hooks

Хуки нельзя использовать в обычных JavaScript-функциях. Их можно вызывать только:

  • внутри функционального компонента React;
  • внутри другого пользовательского хука (который сам следует этим правилам).

Это обеспечивает, что вся логика, связанная с состоянием и эффектами, остаётся привязанной к компонентному дереву.

Именование

Все хуки (встроенные и пользовательские) должны начинаться с префикса use. Это соглашение помогает React и разработчикам распознавать, что функция использует реактовые возможности и подчиняется правилам хуков.

Примеры корректных имён:

  • useState
  • useEffect
  • useLocalStorage
  • useWindowSize

React предоставляет линтер-правило (eslint-plugin-react-hooks), которое автоматически проверяет соблюдение этих правил. Рекомендуется всегда включать его в проект.