Зачем нужны правила хуков и что будет при нарушении порядка их вызова?

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

Как это работает

Для каждого компонента React хранит список «ячеек» хуков. Первый useState — ячейка 0, второй — ячейка 1 и так далее. На следующем рендере хуки вызываются по тому же порядку и получают свои ячейки.

function Bad({ show }) {
  if (show) {
    const [a, setA] = useState(0); // условный хук
  }
  const [b, setB] = useState(1);   // индекс «поплыл»
}

Если на втором рендере условие поменялось, b получит состояние a, а количество хуков не совпадёт — React выбросит ошибку или будут тихие баги.

Правила

• Вызывать хуки только на верхнем уровне: без if, for, try, вложенных функций и после раннего return.
• Вызывать хуки только из функциональных компонентов или кастомных хуков (имя начинается с use).

Как нарушение избежать

• Условие переносят внутрь хука: useEffect(() => { if (cond) ... }).
• Ранний return ставят после всех хуков.
• ESLint-плагин react-hooks/rules-of-hooks ловит нарушения автоматически.

Коротко для собеседования

React сопоставляет хуки по порядку вызова, поэтому порядок должен быть одинаковым на каждом рендере. Хуки нельзя вызывать условно, в циклах и после раннего return; контролирует это eslint-plugin-react-hooks.