React. Хук vs функция

🧱 Суть

Хук и обычная функция – это обычные функции JavaScript, но хук подчиняется правилам React. Главное отличие – использует ли функция React-хуки (useState, useEffect, useRef и др.).

📦 Что такое хук

Хук (useSomething) – это функция, которая:

использует внутри другие React-хуки;
зависит от жизненного цикла компонента;
должна вызываться только на верхнем уровне компонента или другого хука.

React отслеживает хуки по порядку их вызова, поэтому их нельзя вызывать внутри:

if
for
map
обработчиков событий (onClick)
обычных функций

📦 Что такое обычная функция

Обычная функция:

не использует React-хуки;
не зависит от жизненного цикла React;
может вызываться где угодно.

Например:

внутри if;
в map;
в обработчиках событий;
внутри других функций.

💻 Код

Неправильный пример:

export const useCopy = (text: string) => {
  copy(text);
  notifyStore.setSuccess('Скопировано!');
};

Использование:

const handleClick = () => {
  useCopy('123'); // ❌ нарушение Rules of Hooks
};

Правильный вариант:

export const copyWithNotify = (text: string) => {
  copy(text);
  notifyStore.setSuccess('Скопировано!');
};

Использование:

const handleClick = () => {
  copyWithNotify('123'); // ✅ обычная функция
};

Сравнение

Признак	Хук	Обычная функция
Использует React-хуки	✅	❌
Зависит от жизненного цикла React	✅	❌
Можно вызвать в `if`, `map`, `onClick`	❌	✅
Хранит React-состояние	✅	❌
Имя начинается с `use`	✅	❌

🎯 Вывод

Хук использует React-хуки и должен соблюдать Rules of Hooks.
Обычная функция не зависит от React и может вызываться в любом месте.
Не стоит называть функцию с префиксом use, если внутри нет React-хуков.

LETUNOFF DOCS

Навигация