Правила вызова хуков, и для чего они нужны?

Question

Хуки — это функции, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Правила их вызова: 1) Вызывать хуки только на верхнем уровне, не внутри циклов, условий или вложенных функций. 2) Вызывать хуки только из React-функций (функциональных компонентов или других кастомных хуков). Эти правила нужны, чтобы React мог корректно сопоставлять и сохранять состояние хуков между множественными вызовами useState и useEffect при каждом рендере.

YeaHub · Accepted Answer

Хуки произвели революцию в React, позволив использовать состояние и жизненный цикл в функциональных компонентах. Однако их внутренняя реализация накладывает строгие правила.Для чего нужны хуки?Использование состояния: useState позволяет функциональному компоненту хранить и обновлять внутреннее состояние.Побочные эффекты: useEffect позволяет выполнять код, который взаимодействует с внешним миром (запросы к API, подписки) после рендера компонента.Переиспользование логики: Кастомные хуки позволяют извлекать и повторно использовать stateful-логику между разными компонентами.Правила вызова хуковReact полагается на порядок вызова хуков, чтобы правильно сопоставить каждому хуку его состояние. Нарушение порядка ломает этот механизм.Вызывайте хуки только на верхнем уровнеНельзя вызывать внутри условий, циклов или вложенных функций.Почему: React использует порядок вызова хуков, чтобы определить, какому компоненту какое состояние принадлежит. Если условие if пропускает хук, порядок сбивается, и последующие хуки получат неверное состояние.// НЕПРАВИЛЬНО
if (someCondition) {
  const [state, setState] = useState(); // Хук может не вызваться
}

// ПРАВИЛЬНО
const [state, setState] = useState();
if (someCondition) {
  // Используй state здесь
}Вызывайте хуки только из React-функцийМожно: Внутри функциональных компонентов.Можно: Внутри других кастомных хуков.Нельзя: В обычных JavaScript-функциях, классовых компонентах.Вывод: Строгое соблюдение этих правил гарантирует, что состояние и эффекты в ваших компонентах будут работать предсказуемо и без ошибок. ESLint плагин eslint-plugin-react-hooks автоматически проверяет соблюдение этих правил.