Правила использования хуков в React

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

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

Основные правила использования хуков

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

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

Плохо:

if (someCondition) {
  const [count, setCount] = useState(0); // ошибка
}
**Хорошо:**
```tsx 
const [count, setCount] = useState(0);

if (someCondition) {
  // можно использовать count здесь
}

Почему? React полагается на порядок вызова хуков при каждом рендере. Если вы вызываете хук внутри условия — порядок может нарушиться.

Вызывайте хуки только в функциональных компонентах или внутри кастомных хуков

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

Нельзя:

function doSomething() {
  const [val, setVal] = useState(0); // ошибка
}

Можно:

function MyComponent() {
  const [val, setVal] = useState(0); // правильно
  return <p>{val}</p>;
}

Или внутри своего хука:

function useCustomLogic() {
  const [state, setState] = useState(false);
  return { state, setState };
}

Хуки должны вызываться в одинаковом порядке при каждом рендере

Нельзя менять порядок хуков при разных условиях. Это приводит к неправильному сопоставлению значений

// Плохо
if (flag) {
  useEffect(() => {}, []); // может сломаться при следующем рендере
}

Как гарантировать правильное использование?

• eslint-plugin-react-hooks — он поможет отлавливать нарушения.
• Не помещайте хуки внутрь if, for, switch, try/catch и любых вложенных функций.