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