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