Hooks

Хуки состояния

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

Чтобы добавить state в компонент, используйте один из следующих хуков:

• useState объявляет переменную state, которую вы можете обновлять напрямую.
• useReducer объявляет переменную состояния с логикой обновления внутри функции-редуктора.

function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

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

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

• useContext считывает и подписывается на контекст.

function Button() {
  const theme = useContext(ThemeContext);
  // ...

Хуки реф

Refs позволяют компоненту хранить некоторую информацию, которая не используется для рендеринга, такую как узел DOM или ID таймаута. В отличие от state, обновление ref не приводит к повторному рендерингу вашего компонента. Refs — это «аварийный выход» из парадигмы React. Они полезны, когда вам нужно работать с системами, не относящимися к React, такими как встроенные API браузера.

• useRef объявляет ref. В нём можно хранить любое значение, но чаще всего он используется для хранения узла DOM.
• useImperativeHandle позволяет настраивать ref, предоставляемый вашим компонентом. Он используется редко.

function Form() {
  const inputRef = useRef(null);
  // ...

Эффектные хуки

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

• useEffect подключает компонент к внешней системе.

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  // ...

Эффекты — это «лазейка» из парадигмы React. Не используйте эффекты для организации потока данных в вашем приложении. Если вы не взаимодействуете с внешней системой, вам, возможно, не нужен эффект.

Существует два редко используемых варианта useEffect, отличающихся по времени выполнения:

• useLayoutEffect срабатывает до того, как браузер перерисует экран. Здесь можно измерить макет.
• useInsertionEffect срабатывает до того, как React вносит изменения в DOM. Библиотеки могут вставлять здесь динамический CSS.

Вы также можете отделить события от эффектов:

• useEffectEvent создает нереактивное событие, которое срабатывает из любого хука эффекта.

Хуки производительности

Распространенный способ оптимизации производительности повторного рендеринга — пропуск ненужной работы. Например, вы можете указать React повторно использовать кэшированный результат вычисления или пропустить повторный рендеринг, если данные не изменились с момента предыдущего рендеринга.

Чтобы пропустить вычисления и ненужный повторный рендеринг, используйте один из следующих хуков:

• useMemo позволяет кэшировать результат ресурсоемкого вычисления.
• useCallback позволяет кэшировать определение функции перед передачей её в оптимизированный компонент.

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

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

Чтобы установить приоритет рендеринга, используйте один из следующих хуков:

• useTransition позволяет пометить переход состояния как неблокирующий и разрешить другим обновлениям прерывать его.
• useDeferredValue позволяет отложить обновление некритичной части пользовательского интерфейса и дать возможность сначала обновиться другим частям.

Другие хуки

Эти хуки в основном полезны авторам библиотек и обычно не используются в коде приложения.

• useDebugValue позволяет настроить метку, которую React DevTools отображает для вашего пользовательского хука.
• useId позволяет компоненту связать с собой уникальный идентификатор. Обычно используется с API доступности.
• useSyncExternalStore позволяет компоненту подписаться на внешнее хранилище.

• useActionState позволяет управлять состоянием действий.

Ваши собственные хуки

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