Що нового з'явилося в React 18?

ReactJunior~5 хв читання

Що нового в React 18

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

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

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

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

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)
useActionState - для роботи з Actions (див. вище)
Експериментальна (або поступово впроваджувана) API use() - хук, який дозволяє «очікувати» Promise прямо в тілі компонента / всередині render, спрощуючи асинхронну логіку. (kellton.com)

3. Новий React Compiler

React 19 включає нову компіляцію / трансляцію React-коду, яка оптимізує код на етапі збірки: зменшує розмір бандла, оптимізує рендеринг і звільняє від потреби вручну використовувати такі оптимізації, як useMemo, useCallback, memo. (freecodecamp.org) Тобто: багато оптимізацій працюватимуть «автоматично» завдяки компілятору.

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

Тепер функціональним компонентам можна передавати ref як звичайний проп, без потреби в forwardRef. (freecodecamp.org)
Покращена логіка гідратації (hydration) і взаємодії зі сторонніми скриптами / розширеннями - React 19 робить гідратацію на клієнті стійкішою. (dev.to)
Context (Context API) отримав деякі оптимізації: продуктивність і патерни використання стали зручнішими. (dev.to)

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

Можливість писати метадані документа (наприклад, <title>, <meta> та ін.) всередині компонентів (наприклад: <title>{post.title}</title> всередині компонента) - спрощує SEO та інтеграцію із серверним рендерингом. (react.dev)
Нові API для завантаження/попереднього завантаження ресурсів: preload, preinit, а також покращена підтримка ассетів, стилів і асинхронних скриптів. (dev.to)
Покращення в Suspense, Server Components і стрімінговому рендерингу (streaming) - React 19 посилює можливості, закладені в React 18. (dev.to)

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

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

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

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

Premium

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