> Что нового в React 19 (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Kodix, EdenAI

Стек: React

> Пример ответа

Короткий ответ

React 19 - это мажорный релиз, который вводит Actions, новый хук use(), улучшенный ref как prop, Server Components в стабильном API, и автоматическое управление состоянием загрузки с useTransition. Также появилась поддержка document.metadata через <title> и <meta> в компонентах, и улучшена работа с формами через <form action>. Основной фокус - упрощение асинхронных сценариев и гидратации.

Подробное объяснение

React 19 привносит несколько ключевых изменений, которые затрагивают как клиентский, так и серверный рендеринг. Главное нововведение - Actions: функции, передаваемые в action prop элементов <form> или в useTransition, автоматически получают состояние pending и могут обрабатывать ошибки. Это заменяет ручное управление loading и error состояниями.

Хук use() позволяет читать ресурсы (промисы, контексты) прямо в рендере без useEffect. Он работает как с Suspense, так и с ErrorBoundary, упрощая асинхронную загрузку данных.

ref как prop - теперь не нужно использовать forwardRef, ref передаётся как обычный prop в функциональные компоненты. Это упрощает API библиотек компонентов.

Server Components стали стабильными: компоненты, которые выполняются только на сервере, могут напрямую обращаться к базам данных и файловой системе, не отправляя JavaScript клиенту. В React 19 улучшена интеграция с use client и use server директивами.

Автоматическое управление метаданными - компоненты могут задавать <title>, <meta> и <link> напрямую, React сам управляет их размещением в <head>, избегая дублирования.

Улучшенная гидратация - React 19 использует streaming SSR с меньшим размером бандла и оптимизирует повторное использование HTML на клиенте.

На практике

Для разработчика React 19 означает меньше boilerplate при работе с формами и асинхронными операциями. Вместо того чтобы вручную отслеживать isLoading и error, можно использовать useActionState (новый хук) или useTransition с Actions. Это особенно полезно для сабмитов форм, загрузки данных по клику и optimistic updates.

use() заменяет паттерн "fetch in useEffect" для простых случаев, но требует понимания Suspense границ. Server Components меняют архитектуру приложения: теперь можно вынести тяжёлую логику на сервер, оставив клиенту только интерактивность.

При миграции с React 18 нужно заменить forwardRef на прямую передачу ref, обновить обработчики форм на action и проверить совместимость сторонних библиотек (например, React Router ещё не полностью поддерживает React 19).

Пример кода

JSX
// React 19: Actions и useActionState
import { useActionState } from 'react';

function UpdateNameForm() {
  const [state, formAction, isPending] = useActionState(
    async (previousState, formData) => {
      const name = formData.get('name');
      const response = await fetch('/api/update', { method: 'POST', body: formData });
      if (!response.ok) return { error: 'Ошибка обновления' };
      return { success: true };
    },
    { error: null }
  );

  return (
    <form action={formAction}>
      <input name="name" />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Сохранение...' : 'Сохранить'}
      </button>
      {state.error && <p>{state.error}</p>}
    </form>
  );
}

// React 19: use() для чтения промиса
function UserProfile({ userId }) {
  const user = use(fetchUser(userId));
  return <div>{user.name}</div>;
}

// React 19: ref как prop (без forwardRef)
function MyInput({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

Как отвечать на собеседовании

Начни с ключевых нововведений, которые меняют повседневную разработку: Actions, use(), ref как prop. Затем перечисли Server Components и метаданные. Упомяни, что React 19 - это эволюция, а не революция: большинство изменений обратно совместимы, но требуют обновления паттернов. Приведи конкретный пример, как Actions упрощают код формы. Если спросят про миграцию, скажи, что основная работа - замена forwardRef и адаптация сторонних библиотек. Не углубляйся в детали реализации, если не спрашивают. Подчеркни, что React 19 делает асинхронные сценарии более декларативными.

Что проверяет интервьюер

Интервьюер оценивает, насколько ты следишь за развитием React и понимаешь, как новые API влияют на архитектуру приложений. Важно показать, что ты не просто заучил список фич, а осознаёшь trade-off: например, use() требует Suspense, Actions не подходят для всех типов асинхронных операций. Также проверяется способность объяснить, как Server Components меняют разделение ответственности между клиентом и сервером. Ожидается, что senior-разработчик может оценить, когда стоит использовать новую функциональность, а когда лучше остаться на старых паттернах.

Типичные ошибки

Путать use() с хуками - это не хук, а специальная функция, которая может вызываться только в рендере и внутри компонента или другого use().
Думать, что Actions заменяют все библиотеки управления формами - они решают только базовые сценарии, для сложной валидации или кастомных полей всё ещё нужны решения вроде React Hook Form.
Игнорировать обратную совместимость: ref как prop ломает старые компоненты, которые используют forwardRef - нужно обновлять все потребители.
Считать Server Components заменой клиентским компонентам - это разные уровни, их нужно комбинировать, а не заменять одно другим.
Забывать про useActionState для форм - новички часто пытаются использовать useTransition для форм, хотя есть специализированный хук.