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

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

Зачем нужны хуки

До хуков состояние и жизненный цикл были доступны только классовым компонентам. Логику приходилось распределять по методам componentDidMount, componentDidUpdate, componentWillUnmount. Одна задача оказывалась размазанной по нескольким местам.

Хуки решают это: логика группируется по смыслу, а не по жизненному циклу.

Правила хуков

React накладывает два жёстких правила:

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

// Плохо
function Component({ isAdmin }) {
    if (isAdmin) {
        const [name, setName] = useState(''); // ошибка
    }
}

// Хорошо
function Component({ isAdmin }) {
    const [name, setName] = useState('');

    if (isAdmin) {
        // использование
    }
}

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

Почему правила важны

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

Встроенные хуки

• useState — состояние
• useEffect — побочные эффекты
• useContext — доступ к контексту
• useRef — ссылка на DOM-элемент или значение
• useMemo — мемоизация значения
• useCallback — мемоизация функции
• useReducer — сложное состояние
• useLayoutEffect — синхронный эффект после DOM
• useId — уникальный ID
• useTransition — отложенные обновления
• useDeferredValue — отложенное значение

Кастомные хуки

Свои хуки — это функции, которые начинаются с use и вызывают другие хуки:

function useToggle(initial = false) {
    const [value, setValue] = useState(initial);
    const toggle = () => setValue((v) => !v);
    return { value, toggle };
}

Линтер

Плагин eslint-plugin-react-hooks проверяет правила хуков. Vite-шаблон уже включает его. Если правило нарушено — линтер покажет ошибку.

Итоги

• Хуки — функции для состояния и эффектов
• Вызываются только на верхнем уровне компонента или хука
• Порядок вызовов должен быть неизменным
• Свои хуки начинаются с use