Почему нельзя использовать хуки внутри условного рендеринга

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

Пример неправильного использования:

if (condition) {
  const [state, setState] = useState(); // ❌ Ошибка!
}

Правильный подход — всегда вызывать хуки на верхнем уровне компонента:

const [state, setState] = useState(); // ✅
if (condition) {
  // Используем state здесь
}