Правила використання хуків у React

Хуки — це функції, які дозволяють використовувати стан та інші можливості React в функціональних компонентх.

Але для того, щоб React правильно відстежував та викликав хуки, ви повинні суворо дотримуватись правил їх використання.

Основні правила використання хуків

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

Ви не можете викликати хуки всередині умов, циклів або вкладених функцій.

Погано:

tsx

if (someCondition) {
  const [count, setCount] = useState(0); // помилка
}

Добре:

tsx

const [count, setCount] = useState(0);

if (someCondition) {
  // можна використовувати count тут
}

Чому? React покладається на порядок викликів хуків при кожному рендерингу. Якщо ви викликаєте хук всередині умови — порядок може бути порушений.

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

Ви не можете викликати хуки в звичайних функціях, обробниках, умовах поза компонентом.

Не можна:

tsx

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

Можна:

tsx

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

Або всередині кастомного хуку:

tsx

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

Хуки повинні викликатися в одному і тому ж порядку при кожному рендерингу

Ви не можете змінювати порядок викликів хуків за різних умов. Це призводить до неправильного зіставлення значень.

tsx

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

Як забезпечити правильне використання?

eslint-plugin-react-hooks — це допомагає виявляти порушення.
Не розміщуйте хуки всередині if, for, switch, try/catch та будь-яких вкладених функцій.

Важливо:

Якщо ви порушите правила використання хуків, React не зможе правильно відстежувати стан, ефекти та інші внутрішні дані. Це призведе до помилок та непередбачуваної поведінки.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Правила використання хуків у React

#Основні правила використання хуків

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

#Викликайте хуки тільки в функціональних компонентх або всередині кастомних хуків

#Хуки повинні викликатися в одному і тому ж порядку при кожному рендерингу