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

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

Допрацюйте відповідь до «Що нового з'явилося в React 18?». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

## Що нового в React 18

Ось основні зміни і нововведення, які представив React 18:

| Функція / зміна | Що дає / навіщо потрібна | Особливості / на що звернути увагу |
| --- | --- | --- |
| **Concurrent Rendering (конкурентний рендеринг, базовий механізм)** | Дозволяє React «призупиняти», «продовжувати» або «відкочувати» рендеринг окремих частин дерева UI залежно від пріоритету задач, що допомагає інтерфейсу лишатися відгукливим. ([react.dev](https://react.dev/blog/2022/03/29/react-v18)) | Ця можливість не одразу «вмикається всюди» - багато фіч (Transitions, Suspense на сервері та ін.) спираються на неї. |
| **Automatic Batching (автоматичне групування оновлень стану)** | Тепер React уміє автоматично батчити (групувати) оновлення стану навіть в асинхронних контекстах (наприклад, всередині `setTimeout`, промісів тощо), не тільки всередині обробників подій. Це зменшує зайві рендери. ([freecodecamp.org](https://www.freecodecamp.org/news/react-18-new-features/)) | Якщо з якихось причин потрібно скасувати групування - можна використати `flushSync`. |
| **Transitions / useTransition / startTransition** | Дозволяють позначати оновлення як «нетермінові» (transitions), наприклад, коли зміна UI може бути трохи відкладена, щоб не блокувати ввід користувача. ([react.dev](https://react.dev/blog/2022/03/29/react-v18)) | Оновлення всередині `startTransition` можна переривати, якщо з'являються термінові оновлення (наприклад, введення тексту). |
| **useDeferredValue** | Хук, який дозволяє «відкласти» частину UI, якщо вона не критична - корисний, коли деякі дані або компоненти можна оновлювати трохи пізніше, не заважаючи основній інтерактивності. ([simplilearn.com](https://www.simplilearn.com/tutorials/reactjs-tutorial/react-eighteen-new-features)) | Добре підходить для списків, фільтрів і подібних сценаріїв. |
| **Нові хуки і API** | Наприклад: `useId` (для унікальних ID, узгоджених між клієнтом і сервером), `useSyncExternalStore`, `useInsertionEffect` та ін. ([react.dev](https://react.dev/blog/2022/03/29/react-v18)) | Ці хуки особливо корисні для бібліотек або для випадків, де потрібна точна поведінка при конкурентному рендерингу. |
| **Новий Root API:** `createRoot`**,** `hydrateRoot` **та ін.** | Щоб увімкнути можливості React 18 (конкурентність, автоматичний batching та ін.), потрібно створювати корінь через `createRoot` (замість `ReactDOM.render`) і використовувати `hydrateRoot` для гідратації серверного рендеру. ([react.dev](https://react.dev/blog/2022/03/29/react-v18)) | Старі API досі працюють, але не задіюють нові можливості. |
| **Suspense / серверний рендеринг / streaming** | React 18 розширює `Suspense` (раніше використовувався здебільшого для код-сплітингу) і додає підтримку стрімінгу (streaming HTML) на сервері, що дозволяє віддавати частини HTML у міру готовності. ([react.dev](https://react.dev/blog/2022/03/29/react-v18)) | Ці можливості особливо актуальні для фреймворків на кшталт Next.js, Remix тощо. |
| **Зміни поведінки в** `StrictMode` **(у режимі розробки)** | У суворому режимі React монтуватиме → розмонтовуватиме → знову монтуватиме компоненти, щоб виявляти потенційні проблеми (ефекти, очищення тощо). ([react.dev](https://react.dev/blog/2022/03/29/react-v18)) | Це стосується тільки розробки - у production така поведінка не вмикається. |
| **Інші «дрібні» зміни й покращення** | Наприклад: <br>• тепер компонент може повертати `undefined` (без помилки) ([blog.appsignal.com](https://blog.appsignal.com/2022/04/13/whats-new-in-react-18.html)) <br>• виправлено витік пам'яті при розмонтуванні (React очищає більше внутрішніх полів) <br>• прибрано підтримку дуже старих браузерів (React тепер передбачає наявність сучасних можливостей на кшталт `Promise`, `Symbol` тощо) | При міграції варто перевірити, чи не залежить застосунок від поведінкових особливостей старих API чи старих браузерів. |

Загалом перехід з React 17 на React 18 - не стільки радикальний «розрив з API», скільки фундаментальне посилення рендерингу, яке відкриває шлях до нових можливостей і більш відгукливого UI.

## Що нового в React 19

### 1. Actions

React 19 вводить концепцію *Actions* - асинхронних функцій, які можна запускати всередині transitions, і які автоматично керують станом очікування («pending»), помилками, оптимістичними оновленнями. ([react.dev](https://react.dev/blog/2024/12/05/react-19))
Приклад:

```javascript
const [error, submitAction, isPending] = useActionState(
  async (prev, formData) => {
    const error = await updateName(formData.get("name"));
    if (error) return error;
    redirect("/path");
    return null;
  },
  null
);
```

Такий підхід замінює вручну написане керування станами `isPending`, `error`, оновлення форми тощо.

---

### 2. Новий набір хуків і API навколо Actions і форм

- `useOptimistic` - для оптимістичних оновлень (наприклад: змінити UI одразу, до завершення запиту, з можливістю відкату)
- `useFormStatus` - для відстеження статусу форми (чи відправляється, чи завершена, чи є помилка) ([telerik.com](https://www.telerik.com/blogs/whats-new-react-19))
- `useActionState` - для роботи з Actions (див. вище)
- Експериментальна (або поступово впроваджувана) API `use()` - хук, який дозволяє «очікувати» Promise прямо в тілі компонента / всередині render, спрощуючи асинхронну логіку. ([kellton.com](https://www.kellton.com/kellton-tech-blog/react-19-latest-features-and-updates))

---

### 3. Новий React Compiler

React 19 включає нову компіляцію / трансляцію React-коду, яка оптимізує код на етапі збірки: зменшує розмір бандла, оптимізує рендеринг і звільняє від потреби вручну використовувати такі оптимізації, як `useMemo`, `useCallback`, `memo`. ([freecodecamp.org](https://www.freecodecamp.org/news/new-react-19-features-you-should-know-with-code-examples/))
Тобто: багато оптимізацій працюватимуть «автоматично» завдяки компілятору.

---

### 4. Підтримка нових шаблонів використання ref і контексту

- Тепер функціональним компонентам можна передавати `ref` як звичайний проп, без потреби в `forwardRef`. ([freecodecamp.org](https://www.freecodecamp.org/news/new-react-19-features-you-should-know-with-code-examples/))
- Покращена логіка гідратації (hydration) і взаємодії зі сторонніми скриптами / розширеннями - React 19 робить гідратацію на клієнті стійкішою. ([dev.to](https://dev.to/gladiatorsbattle/react-19-stable-release-whats-new-and-how-to-upgrade-299d))
- Context (Context API) отримав деякі оптимізації: продуктивність і патерни використання стали зручнішими. ([dev.to](https://dev.to/mukhilpadmanabhan/react-19-the-features-you-need-to-know-55h6))

---

### 5. Покращена підтримка форм, метаданих і ресурсів

- Можливість писати метадані документа (наприклад, `<title>`, `<meta>` та ін.) всередині компонентів (наприклад: `<title>{post.title}</title>` всередині компонента) - спрощує SEO та інтеграцію із серверним рендерингом. ([react.dev](https://react.dev/blog/2024/12/05/react-19))
- Нові API для завантаження/попереднього завантаження ресурсів: `preload`, `preinit`, а також покращена підтримка ассетів, стилів і асинхронних скриптів. ([dev.to](https://dev.to/gladiatorsbattle/react-19-stable-release-whats-new-and-how-to-upgrade-299d))
- Покращення в Suspense, Server Components і стрімінговому рендерингу (streaming) - React 19 посилює можливості, закладені в React 18. ([dev.to](https://dev.to/hamzakhan/react-19-beyond-whats-new-and-whats-next-in-2025-fh6))

---

## Чому це важливо і як це впливає на розробку

- Скорочується шаблонний код: менше явного керування станами відправлення форми, помилок, очікування. Actions + новий хук дають декларативніший підхід.
- Покращена продуктивність завдяки компілятору: менше потреби вручну оптимізувати через `useCallback`, `useMemo`.
- Кращий DX (developer experience): код стає чистішим, менше boilerplate.
- SEO / серверний рендеринг стають потужнішими: метадані, ресурси, гідратація покращені.
- Міграції і сумісність: важливо перевіряти бібліотеки, які ви використовуєте, оскільки деякі застарілі API можуть бути deprecated / змінені.

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

Для рев’юера

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

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