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

Покращити цю статтю

Допрацюйте відповідь до «Actions у React 19». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке Actions

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

---

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

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

- **Статус очікування** (`pending`): React автоматично відстежує, що Action виконується, і ви можете використовувати цей статус в UI. ([react.dev](https://react.dev/blog/2024/12/05/react-19))
- **Помилки**: Якщо Action завершився з помилкою, React може пов'язати це з механізмом Error Boundary і відповідним UI-відображенням. ([mux.com](https://www.mux.com/blog/react-19-server-components-and-actions))
- **Оптимістичні оновлення**: Можна показати користувачу передбачуваний результат одразу (до завершення операції), а в разі невдачі - відкотити або скоригувати. ([mux.com](https://www.mux.com/blog/react-19-server-components-and-actions))
- **Інтеграція з формами**: Action можна передати як обробник форми (`action` / `formAction`), і React автоматично пов'язує форму з Action, обробляє відправку, скидання форми і т.д. ([react.dev](https://react.dev/blog/2024/12/05/react-19))
- **Server Actions / Server Functions**: Actions можуть виконуватися на сервері (серверні функції) і викликатися з клієнтського компонента, що спрощує архітектуру. ([react.dev](https://react.dev/reference/rsc/server-functions))

---

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

```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](https://react.dev/blog/2024/12/05/react-19))

---

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

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

---

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

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

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати385 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.