Какое условие, чтобы React распознал функцию как хук?

Условия для распознавания React-функции как хука

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

Основные условия для создания кастомного хука

1. Имя функции должно начинаться с "use" - это главная конвенция

   // React распознает это как хук
   function useCustomHook() {
     const [state, setState] = useState(null);
     return state;
   }
   
   // Это НЕ будет распознано как хук (несмотря на возможность использования других хуков внутри)
   function getCustomData() {
     const [data, setData] = useState(null);
     return data;
   }
   

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

   // Правильный кастомный хук
   function useLocalStorage(key, initialValue) {
     const [value, setValue] = useState(() => {
       const stored = localStorage.getItem(key);
       return stored ? JSON.parse(stored) : initialValue;
     });
     
     useEffect(() => {
       localStorage.setItem(key, JSON.stringify(value));
     }, [key, value]);
     
     return [value, setValue];
   }
   

Как React технически определяет хуки

React использует диспетчер хуков (Hook dispatcher), который активируется при вызове функций, начинающихся с "use". Этот механизм работает благодаря внутренней структуре Fiber-узлов React:

// Упрощенная внутренняя логика React
let isRendering = false;
let currentHook = null;

function resolveDispatcher() {
  const dispatcher = ReactCurrentDispatcher.current;
  
  // Проверка на вызов хука не на верхнем уровне
  if (!isRendering) {
    throw new Error('Invalid hook call');
  }
  
  return dispatcher;
}

// Все встроенные хуки используют этот механизм
function useState(initialState) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

Правила, которые React проверяет во время выполнения

React выполняет статические проверки через ESLint плагин eslint-plugin-react-hooks и рантайм-валидацию:

1. Правило вызова хуков только на верхнем уровне

   // ❌ НЕПРАВИЛЬНО - хук в условии
   if (condition) {
     const [state, setState] = useState();
   }
   
   // ✅ ПРАВИЛЬНО
   const [state, setState] = useState();
   

2. Хуки должны вызываться только из React-функций

   // ❌ НЕПРАВИЛЬНО - хук в обычной функции
   function regularFunction() {
     const value = useState(0); // Ошибка!
   }
   
   // ✅ ПРАВИЛЬНО - хук в компоненте
   function MyComponent() {
     const [value, setValue] = useState(0);
   }
   
   // ✅ ПРАВИЛЬНО - хук в кастомном хуке
   function useCustom() {
     const [value, setValue] = useState(0);
     return value;
   }
   

Практическое значение конвенции "use"

Префикс "use" выполняет несколько важных функций:

• Автоматическая проверка ESLint - плагин eslint-plugin-react-hooks автоматически анализирует все функции с префиксом "use"
• Читаемость кода - разработчики сразу понимают, что функция содержит хуки
• Статический анализ - инструменты могут обнаруживать нарушения правил хуков

// ESLint автоматически проверит соблюдение правил хуков
function useUserProfile(userId) {
  // ESLint проверит зависимости этого эффекта
  useEffect(() => {
    fetchUserData(userId);
  }, [userId]); // ✅ ESLint предупредит, если зависимости неполные
  
  const [user, setUser] = useState(null);
  return user;
}

Исключения и особенности

1. Технически можно обойти конвенцию, но это приведет к проблемам:

   // ❌ АНТИПАТТЕРН - технически работает, но теряются все преимущества
   const myDisguisedHook = () => {
     const [state, setState] = useState(0);
     return state;
   };
   // ESLint не проверит правила хуков для этой функции!
   

2. Библиотеки могут использовать внутренние хуки без префикса "use", но это специальные случаи для внутреннего использования React.

Вывод

React распознает функцию как хук на основе комбинации конвенции именования (префикс "use") и внутренних механизмов диспетчеризации. Хотя технически возможно создать функцию, которая использует хуки без префикса "use", это нарушит работу линтеров и сделает код менее поддерживаемым. Следование конвенции "use" обеспечивает автоматическую проверку правил хуков, улучшает читаемость кода и позволяет инструментам разработки корректно анализировать ваше приложение.