hooks.md

title
React: вбудовані хуки

Хуки дають змогу використовувати різноманітну функціональність 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. Вони корисні, коли потрібно працювати з не-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 спрацьовує до того, як браузер перемалює екран. У ньому можна виміряти компонування елементів (layout).
• 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.