Skip to main content

Actions у React 19

ReactJunior~2 хв читання
Запропонувати правку

Що таке Actions

Action - це, по суті, функція (зазвичай асинхронна), яка запускає мутацію (зміну даних, відправку форми, обробку події) і яку React тепер розуміє як єдиний блок з автоматичним керуванням станом, помилками і оптимістичними оновленнями. (react.dev) Тобто замість того щоб вручну писати isLoading, try/catch, setError, setPending, ви можете визначити Action-функцію, і React зробить значну частину цього за вас.

Основні можливості Actions

Ось ключові функції, які надає механізм Actions:

  • Статус очікування (pending): React автоматично відстежує, що Action виконується, і ви можете використовувати цей статус в UI. (react.dev)
  • Помилки: Якщо Action завершився з помилкою, React може пов'язати це з механізмом Error Boundary і відповідним UI-відображенням. (mux.com)
  • Оптимістичні оновлення: Можна показати користувачу передбачуваний результат одразу (до завершення операції), а в разі невдачі - відкотити або скоригувати. (mux.com)
  • Інтеграція з формами: Action можна передати як обробник форми (action / formAction), і React автоматично пов'язує форму з Action, обробляє відправку, скидання форми і т.д. (react.dev)
  • Server Actions / Server Functions: Actions можуть виконуватися на сервері (серверні функції) і викликатися з клієнтського компонента, що спрощує архітектуру. (react.dev)

Приклад використання

javascript
// Припустимо, у React 19: import { useActionState } from 'react'; async function updateName(previousState, formData) { const name = formData.get('name'); const error = await api.updateName(name); return error ? { error } : null; } function ChangeName() { const [error, submitAction, isPending] = useActionState(updateName, null); return ( <form action={submitAction}> <input type="text" name="name" /> <button type="submit" disabled={isPending}> Update </button> {error && <p>{error.error}</p>} </form> ); }

Тут:

  • updateName - це Action.
  • useActionState дає: поточний стан (наприклад, помилку), функцію submitAction для підключення до <form> і прапорець isPending.
  • React дбає про очікування, контроль помилки і скидання форми. (react.dev)

Чому це зручно

  • Зменшує шаблонний код (раніше було багато useState, useEffect, try/catch, isLoading).
  • Робить форми і мутації даних більш декларативними.
  • Краще працює з конкурентним рендерингом і серверною стороною (SSR).
  • Підвищує зручність розробки і читабельність коду.

Що важливо знати

  • Actions - це не просто подія (onClick), як раніше, а окремий абстрактний блок з життєвим циклом.
  • Попри декларативність, вам все одно потрібно продумати логіку в Action (що відбувається при успіху/помилці).
  • Деякі частини потребують підтримки з боку фреймворку або бандлера (наприклад, Server Actions).
  • Це нова модель - можливо, бібліотеки ще не повною мірою адаптовані.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку