Хуки React: каждый хук с живыми примерами

Хуки React это функции с именами, начинающимися на use, которые позволяют функциональному компоненту использовать возможности React: useState, чтобы запомнить значение, useEffect, чтобы выполнить код после рендеринга, useRef, чтобы держать узел DOM, useContext, чтобы прочитать общие данные. Вы вызываете их в начале компонента, а React сохраняет их значения между рендерами.

import { useState, useEffect, useRef, useMemo } from 'react';

const FRUITS = ['apple', 'banana', 'cherry', 'grape', 'mango', 'pear'];

export default function App() {
    const [query, setQuery] = useState('');
    const inputRef = useRef(null);

    const matches = useMemo(
        () => FRUITS.filter((f) => f.includes(query.toLowerCase())),
        [query]
    );

    useEffect(() => {
        console.log(`effect: ${matches.length} matches for "${query}"`);
    }, [query, matches.length]);

    return (
        <div>
            <input
                ref={inputRef}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <button onClick={() => inputRef.current.focus()}>Focus</button>
            <ul>
                {matches.map((f) => (
                    <li key={f}>{f}</li>
                ))}
            </ul>
        </div>
    );
}

Здесь вместе работают четыре хука. useState хранит текст, useRef указывает на поле, чтобы кнопка могла поставить на него фокус, useMemo хранит отфильтрованный список, пока не изменится запрос, а useEffect выводит сообщение после каждого рендера, в котором запрос изменился. Наберите an и смотрите в Console: по одной строке на нажатие клавиши, после обновления списка.

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

До React 16.8 компонент, которому нужны были состояние или код жизненного цикла, должен был быть классом. Логика одной функции была разбросана по componentDidMount, componentDidUpdate и componentWillUnmount, а чтобы поделиться ею между компонентами, нужны были миксины (которые так и не заработали с синтаксисом классов), компоненты высшего порядка или render props, и всё это оборачивало дерево в лишние слои.

// The class way: one feature, three methods
class Clock extends React.Component {
    state = { now: new Date() };
    componentDidMount() {
        this.id = setInterval(() => this.setState({ now: new Date() }), 1000);
    }
    componentWillUnmount() {
        clearInterval(this.id);
    }
    render() {
        return <p>{this.state.now.toLocaleTimeString()}</p>;
    }
}

С хуками та же функция живёт в одном месте: эффект запускает таймер, а его очистка останавливает.

import { useState, useEffect } from 'react';

function Clock() {
    const [now, setNow] = useState(new Date());

    useEffect(() => {
        console.log('timer started');
        const id = setInterval(() => setNow(new Date()), 1000);
        return () => {
            clearInterval(id);
            console.log('timer stopped');
        };
    }, []);

    return <p>{now.toLocaleTimeString()}</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} clock</button>
            {show && <Clock />}
        </div>
    );
}

Скройте часы, и Console выведет timer stopped: React выполнил очистку, когда Clock ушёл с экрана. Покажите снова, и запустится свежий таймер. Классовые компоненты по-прежнему работают в React 19, но новый код использует хуки.

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

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

use, useActionState, useOptimistic и useFormStatus появились в React 19, а useEffectEvent стал стабильным в 19.2. Все остальные хуки из списка работают и в React 18.

Состояние вызывает рендер, рефы нет

Не каждый хук вызывает рендер. useState и useReducer вызывают: измените их значение, и React снова нарисует компонент. useRef даёт объект, поле current которого можно свободно менять, и React никогда не перерендеривает из-за него. Поэтому это правильное место для id таймера, предыдущего значения или счётчика, который экран не показывает.

import { useState, useRef, useReducer, useEffect } from 'react';

function reducer(state, action) {
    if (action === 'add') return { items: state.items + 1 };
    if (action === 'clear') return { items: 0 };
    return state;
}

export default function App() {
    const [cart, dispatch] = useReducer(reducer, { items: 0 });
    const [note, setNote] = useState('');
    const commits = useRef(0);

    useEffect(() => {
        commits.current += 1;
        console.log(`render #${commits.current} reached the screen`);
    });

    return (
        <div>
            <p>Items in cart: {cart.items}</p>
            <button onClick={() => dispatch('add')}>Add item</button>
            <button onClick={() => dispatch('clear')}>Clear</button>
            <p>
                <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note" />
            </p>
        </div>
    );
}

useReducer хранит корзину, а useState хранит заметку; оба вызывают рендер при изменении, а эффект выводит по строке на каждый рендер. Эффект также меняет commits.current, но это изменение никогда не вызывает собственного рендера, поэтому лог не зацикливается. Счётчик обновляется в эффекте, а не в теле компонента, потому что тело не должно ничего менять во время рендера.

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

Каждый хук подчиняется двум правилам:

1. Вызывайте хуки на верхнем уровне компонента, никогда внутри условия, цикла или вложенной функции.
2. Вызывайте хуки только из функциональных компонентов или из собственных пользовательских хуков.

React не знает хуки по имени. Он знает их по порядку вызова и ожидает, что этот порядок будет одинаковым при каждом рендере. Хук внутри if сдвинул бы все хуки после него. Страница о правилах хуков показывает, что ломается и как это исправить. use единственное исключение: его можно вызывать внутри условия.

Ваш первый пользовательский хук

Когда двум компонентам нужна одна и та же логика с состоянием, перенесите её в функцию, имя которой начинается с use. Эта функция может вызывать любой другой хук. Каждый компонент, который её вызывает, получает собственное состояние.

import { useState } from 'react';

function useCounter(start, step) {
    const [count, setCount] = useState(start);
    const increment = () => setCount((c) => c + step);
    const reset = () => setCount(start);
    return { count, increment, reset };
}

function Counter({ label, start, step }) {
    const { count, increment, reset } = useCounter(start, step);
    return (
        <p>
            {label}: {count}{' '}
            <button onClick={increment}>+{step}</button>{' '}
            <button onClick={reset}>Reset</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter label="Apples" start={0} step={1} />
            <Counter label="Points" start={100} step={10} />
        </div>
    );
}

Оба счётчика используют один и тот же хук, но клик по одному не трогает другой: пользовательский хук делится логикой, а не состоянием. Добавьте в useCounter функцию decrement и кнопку, которая её вызывает, и её получат сразу оба счётчика. Больше шаблонов (useToggle, useDebounce, useLocalStorage) на странице о пользовательских хуках.

Какой хук выбрать

• Экран должен меняться при изменении значения: useState или useReducer, когда одно и то же состояние обновляют многие события.
• Нужно общаться с чем-то вне React (таймером, подпиской, запросом): useEffect.
• Нужен узел DOM или значение, которое экран не показывает: useRef.
• Многим компонентам глубоко в дереве нужно одно и то же значение: useContext.
• Рендер медленный из-за одного вычисления или из-за того, что мемоизированный дочерний компонент перерендеривается: useMemo и useCallback. React Compiler может добавить эту мемоизацию за вас, но писать её вручную по-прежнему можно, и это всё ещё распространено.
• Ввод кажется заторможенным, потому что обновление за ним тяжёлое: useTransition или useDeferredValue.