hooks.md

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

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

---

Хуки состояния (State Hooks) {/state-hooks/}

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

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

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

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

---

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

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

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

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

---

Хуки рефов (Ref Hooks) {/ref-hooks/}

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

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

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

---

Хуки эффектов (Effect Hooks) {/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) {/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 доступности (accessibility).
• useSyncExternalStore подписывает компонент с внешним хранилищем данных.

• useActionState управляет состоянием действий (Actions).

---

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

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