Какие знаешь правила хуков?

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

Хуки — это специальные функции, которые позволяют «подцепиться» к возможностям состояния и жизненного цикла React из функциональных компонентов. Их использование регулируется несколькими ключевыми правилами, которые обеспечивают стабильную и корректную работу приложения. Знание и соблюдение этих правил критически важно для любого разработчика.

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

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

Хуки нельзя вызывать внутри циклов, условий или вложенных функций. Они должны всегда вызываться на верхнем уровне вашего функционального компонента или другого хука (custom hook). Это гарантирует, что хуки вызываются в одинаковом порядке при каждом рендере, что является основой внутреннего механизма React.

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

// ✅ Правильно: хуки вызываются на верхнем уровне
function MyComponent() {
  const [state, setState] = useState(0);
  const effect = useEffect(() => {
    console.log(state);
  });
  // ...
}

// ❌ Неправильно: хук внутри условия
function WrongComponent() {
  if (someCondition) {
    const [state, setState] = useState(0); // Это приведет к ошибке
  }
}

2. Вызывать хуки только из функциональных React-компонентов или других хуков

Хуки нельзя вызывать из обычных JavaScript-функций или классов. Они работают только внутри:

• Функциональных компонентов React
• Пользовательских хуков (Custom Hooks)

// ✅ Правильно: хук внутри функционального компонента
function MyComponent() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}

// ✅ Правильно: хук внутри пользовательского хука
function useCustomHook() {
  const [value, setValue] = useState('');
  return value;
}

// ❌ Неправильно: хук в обычной функции
function regularFunction() {
  const [item, setItem] = useState(null); // Ошибка!
}

3. Имена пользовательских хуков должны начинаться с use

Это соглашение, которое позволяет React и инструментам разработки (например, линтерам) определить, что функция содержит вызовы хуков, и применять к ней соответствующие правила проверки.

// ✅ Правильно: имя начинается с "use"
function useLocalStorage(key) {
  const [value, setValue] = useState(() => {
    return localStorage.getItem(key);
  });
  
  useEffect(() => {
    localStorage.setItem(key, value);
  }, [key, value]);
  
  return [value, setValue];
}

// ❌ Неправильно: не соблюдается соглашение по именованию
function getLocalStorage(key) {
  const [value, setValue] = useState(); // Линтер может не обнаружить проблему
}

Дополнительные важные аспекты

• Правило зависимостей в useEffect, useCallback, useMemo: всегда включайте все значения из компонента, которые используются внутри эффекта или функции и могут изменяться между рендерами, в массив зависимостей. Игнорирование этого правила приводит к устаревшим значениям и багам.

// ✅ Правильно: все зависимости указаны
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // 'count' в зависимостях

// ❌ Неправильно: зависимость пропущена
useEffect(() => {
  document.title = `Count: ${count}`;
}, []); // Баг: title не обновится при изменении count

• Не модифицируйте состояние напрямую: состояние, возвращаемое useState, всегда следует обновлять через функцию-сеттер или, для сложных случаев, через функцию в useReducer.

Почему эти правила существуют?

Правила хуков не являются произвольными ограничениями — они напрямую связаны с внутренней реализацией React. Когда компонент рендерится, React:

1. Создает список вызовов хуков для этого компонента.
2. Связывает каждый вызов хука с соответствующим внутренним состоянием (значением состояния, эффектом, мемоизированным значением) по его позиции в списке.
3. При следующем рендере ожидает точно такой же порядок вызовов, чтобы восстановить правильное состояние для каждого хука.

Если вы нарушаете правило о вызове на верхнем уровне, порядок может меняться между рендерами, и React «перепутает» состояния между хуками, что приведет к непредсказуемым и критическим ошибкам.

Практические следствия и инструменты

Для контроля соблюдения правил хуков:

• Используйте официальный плагин для линтера eslint-plugin-react-hooks, который включает правила react-hooks/rules-of-hooks и react-hooks/exhaustive-deps.
• Помните, что нарушение правил приводит к ошибке «Invalid hook call» во время выполнения.

Соблюдение этих правил — фундамент для написания надежных, производительных и поддерживаемых React-приложений с использованием хуков. Они превращают функциональные компоненты в полноценные, мощные единицы логики вашего приложения.