hooks.md

title	Built-in React Hooks

Хуки позволяют использовать различные возможности React в ваших компонентах. Вы можете использовать встроенные хуки или комбинировать их для создания собственных. На этой странице перечислены все встроенные хуки React.

---

Хуки состояния {/state-hooks/}

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

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

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

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

---

Хуки контекста {/context-hooks/}

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

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

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

---

Хуки рефов {/ref-hooks/}

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

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

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

---

Хуки эффектов {/effect-hooks/}

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

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

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

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

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

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

---

Хуки производительности {/performance-hooks/}

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

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

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

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

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

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

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

---

Другие хуки {/other-hooks/}

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

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

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

---

Ваши собственные хуки {/your-own-hooks/}

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