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

Хуки произвели революцию в React, позволив использовать состояние и жизненный цикл в функциональных компонентах. Однако их внутренняя реализация накладывает строгие правила.

Для чего нужны хуки?

• Использование состояния: useState позволяет функциональному компоненту хранить и обновлять внутреннее состояние.

• Побочные эффекты: useEffect позволяет выполнять код, который взаимодействует с внешним миром (запросы к API, подписки) после рендера компонента.

• Переиспользование логики: Кастомные хуки позволяют извлекать и повторно использовать stateful-логику между разными компонентами.

Правила вызова хуков

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

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

   • Нельзя вызывать внутри условий, циклов или вложенных функций.

   • Почему: React использует порядок вызова хуков, чтобы определить, какому компоненту какое состояние принадлежит. Если условие if пропускает хук, порядок сбивается, и последующие хуки получат неверное состояние.

   // НЕПРАВИЛЬНО
   if (someCondition) {
     const [state, setState] = useState(); // Хук может не вызваться
   }
   
   // ПРАВИЛЬНО
   const [state, setState] = useState();
   if (someCondition) {
     // Используй state здесь
   }

2. Вызывайте хуки только из React-функций

   • Можно: Внутри функциональных компонентов.

   • Можно: Внутри других кастомных хуков.

   • Нельзя: В обычных JavaScript-функциях, классовых компонентах.

Вывод: Строгое соблюдение этих правил гарантирует, что состояние и эффекты в ваших компонентах будут работать предсказуемо и без ошибок. ESLint плагин eslint-plugin-react-hooks автоматически проверяет соблюдение этих правил.