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

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

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

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

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

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

Хуки контекста

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

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

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

Хуки ссылок

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

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

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 здесь.

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

Распространённый способ оптимизации производительности перерисовки — пропуск ненужной работы. Например, вы можете сказать 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.