Обновление касается не только новых функций — это переосмысление того, как писать код. Серверные компоненты, новые хуки и встроенная оптимизация убирают целые слои сложности. Если вы ещё не знакомы с этими нововведениями, самое время разобраться.

React Compiler: когда оптимизация происходит автоматически

Самое громкое нововведение в React 19 — это встроенный компилятор, который автоматизирует оптимизацию рендеринга. Раньше разработчики вручную использовали useMemo, useCallback и оборачивали компоненты в memo(), чтобы избежать лишних пересчётов. Это создавало шум в коде и легко приводило к ошибкам.

Компилятор React анализирует ваш код и сам определяет, какие данные нужно кешировать, а какие можно пересчитывать без ущерба для производительности. По словам разработчиков фреймворка, это может ускорить рендеринг в два раза. Что важнее — компилятор уже используется в продакшене на Instagram, поэтому его надёжность проверена на реальных нагрузках.

Что даёт вам компилятор:

• Автоматическое удаление ненужных пересчётов без написания useMemo и useCallback
• Более читаемый и простой код, так как не нужно думать об оптимизации производительности
• Гарантированное улучшение производительности благодаря встроенным оптимизациям
• Меньше потенциальных багов, связанных с неправильно настроенной кешированием

Вместо того чтобы писать:

const processedData = useMemo(() => data.map(item => item * 2), [data]);
const handleClick = useCallback((item) => onItemClick(item), [onItemClick]);

Теперь компилятор сам разберётся, что нужно оптимизировать:

const processedData = data.map(item => item * 2);
const handleClick = (item) => onItemClick(item);

Новые хуки: инструменты для асинхронных операций

React 19 добавляет несколько новых хуков, которые упрощают работу с асинхронными задачами и состоянием форм. Это особенно полезно, когда вы работаете с серверными действиями или нужно показать пользователю статус загрузки.

Первый и самый универсальный — это хук use(). Он позволяет читать промисы и контекст прямо в теле компонента, причём это можно делать условно, что невозможно с обычными хуками. Это открывает новые возможности для работы с асинхронными данными и серверными компонентами.

Основные новые хуки React 19:

Хук useOptimistic особенно интересен для создания отзывчивого UI. Когда пользователь отправляет форму, интерфейс сразу показывает новое значение, а не ждёт ответа сервера. Если что-то пошло не так, UI автоматически откатывается к предыдущему состоянию. Это делает приложение заметно более плавным и быстрым на восприятие.

Примеры применения новых хуков:

• Форма с мгновенной обратной связью — когда вводите имя, сразу видите, как оно обновилось, но если сервер вернул ошибку, форма вернётся к прежнему значению
• Кнопка отправки, которая автоматически отключается во время загрузки, без написания собственной логики для отслеживания состояния
• Работа с асинхронными данными, которые раньше требовали использования useEffect и useState

Серверные компоненты: переход от клиента к серверу

Серверные компоненты — это один из самых радикальных сдвигов в архитектуре React-приложений. Вместо того чтобы отправлять весь JavaScript на клиент и выполнять всё в браузере, часть логики остаётся на сервере. Это снижает размер бандла, улучшает безопасность и производительность.

С React 19 и хуком use() работа с серверными компонентами становится проще. Вы можете обращаться к базе данных или внутренним API прямо в серверном компоненте, а затем безопасно передавать данные на клиент. На клиенте вы пишете интерактивные компоненты, которые используют эти данные.

Серверные компоненты решают несколько классических проблем фронтенда:

• Меньше JavaScript на клиенте — снижается время загрузки и парсинга кода
• Безопасная работа с базой данных — вы можете использовать API и ключи, которые не видны клиенту
• Лучше кеширование — сервер может кешировать результаты запросов
• Проще состояние — часть логики живёт на сервере, клиент не нужно её воспроизводить

Например, раньше вы писали компонент, который на клиенте загружает данные, отображает состояния загрузки и ошибок. Теперь серверный компонент сам загружает данные и отправляет готовый результат. Клиентский компонент получает уже готовые данные и занимается только интерактивностью.

Actions: встроенная обработка форм

React 19 вводит встроенный механизм Actions для обработки действий на сервере. Это расширение стандартного атрибута action HTML-форм с интегрированным управлением состоянием ожидания и результатов.

Вместо того чтобы вручную писать обработчик onSubmit, отслеживать состояние загрузки и показывать ошибки, вы просто передаёте асинхронную функцию в атрибут action формы. React сам управляет всеми состояниями и даже может работать без JavaScript на клиенте.

Что даёт вам Actions:

• Форма работает даже если отключен JavaScript (прогрессивное улучшение)
• Автоматическое управление состоянием загрузки и ошибок
• Интеграция с серверными функциями без лишнего кода
• Оптимистичные обновления через useOptimistic

const submitForm = async (formData) => {
  const name = formData.get('name');
  await updateName(name);
};

<form action={submitForm}>
  <input name="name" />
  <button type="submit">Отправить</button>
</form>

Этот код работает намного проще и безопаснее, чем традиционный подход с onSubmit. Если вы используете useFormStatus и useOptimistic, то ещё и получаете отзывчивый UI без дополнительных манипуляций.

Улучшения для работы с типами и рефами

React 19 уделяет больше внимания разработчикам, использующим TypeScript. Новые API получают более точную типизацию, что уменьшает ошибки и делает код более предсказуемым. Интеграция новых хуков с TypeScript работает из коробки, без дополнительных деклараций типов.

Также упростилась работа с рефами. Больше не нужно использовать forwardRef для передачи реферов в функциональные компоненты — теперь это работает как обычный проп. Это уменьшает количество кода и делает API более интуитивным.

Что изменилось в работе с рефами:

• Рефы передаются как обычные пропсы, без forwardRef
• Callback рефы получают больше гибкости
• Лучше типизация рефов в TypeScript

Document Metadata и Asset Loading

React 19 добавляет две полезные функции для работы с метаданными и ресурсами. Первая — Document Metadata позволяет устанавливать мета-теги (title, description и другие SEO-теги) из любого места дерева компонентов, а не только из корня приложения.

Вторая — Asset Loading интегрирует загрузку стилей, шрифтов и скриптов с механизмом Suspense. Это даёт вам гибкий контроль над тем, как и когда загружаются ресурсы, и позволяет избежать проблем с неправильной последовательностью загрузки.

Применение Document Metadata:

• Установка title и description для каждой страницы или компонента
• Добавление Open Graph теги для соцсетей
• Управление robots и canonical ссылками

Asset Loading использует Suspense для:

• Отложенной загрузки стилей с показом скелетона
• Управления загрузкой шрифтов без блокировки рендеринга
• Контролируемой загрузки скриптов третьих сторон

Поддержка Web Components и улучшения Suspense

React 19 расширяет поддержку Web Components, позволяя вам более естественно работать с пользовательскими элементами HTML. Это особенно полезно, если вы используете или создаёте компоненты, которые построены на стандартах Web Components.

Suspense в React 19 получает расширенную функциональность. Теперь он поддерживает больше сценариев использования, включая загрузку данных на сервере с использованием use() и асинхронную инициализацию на клиенте. Это означает, что вам нужны меньше сторонних решений для управления состоянием загрузки.

Усовершенствования Suspense:

• Работает с серверными компонентами и use()
• Лучше обработка ошибок при асинхронной загрузке
• Интеграция с Asset Loading для управления ресурсами
• Более предсказуемое поведение при вложенных Suspense границах

Activity компонент: сохранение состояния при переходах

Одно из скрытых, но полезных улучшений в React 19 — это компонент Activity (переименованный из Offscreen). Он позволяет запомнить состояние компонента при переходе на другой, чтобы потом восстановить его, когда вы вернётесь.

Это особенно полезно в приложениях с табами или многоступенчатыми формами. Если вы заполняли форму, переключились на другой таб, а потом вернулись, ваши данные всё ещё там. Это работает автоматически, без написания специального кода для сохранения и восстановления состояния.

Типичные сценарии использования Activity:

• Сохранение содержимого текстовых полей при переключении табов
• Сохранение позиции скролла при навигации
• Восстановление состояния формы при возврате на предыдущую страницу
• Кеширование состояния модального окна

Как началась история React 19

Разработка React 19 началась не с отдельных фич, а с долгосрочного исследования проблем в экосистеме. Компилятор React (ранее известный как Forget) впервые был продемонстрирован на конференции React Conf в декабре 2021. С тех пор команда разработчиков работала над тем, чтобы интегрировать его в основной фреймворк и дополнить другими инструментами.

Множество функций, которые вы видите в React 19 — Actions, Document Metadata, улучшенная Suspense — были в стадии исследований, затем экспериментировались в Next.js и других проектах Meta, и наконец вошли в основную версию React. Это означает, что каждая функция уже была протестирована на реальных приложениях, включая Instagram, и доказала свою полезность.

Практический переход на React 19

Если вы работаете на новом проекте, переход на React 19 прямолинеен — просто обновите версию и начинайте использовать новые функции. Но если у вас большой существующий проект, переход требует более осторожного подхода.

Хорошая новость — React 19 обратно совместима с предыдущими версиями. Вы можете обновиться и не менять ничего. Новые хуки и компилятор — это дополнительные инструменты, которые вы используете добровольно. Постепенно переписывайте компоненты, переходите на серверные компоненты где это имеет смысл, и используйте новые хуки для новых функций.

Рекомендуемый порядок внедрения:

1. Обновитесь на React 19 и проверьте, что приложение работает
2. Начните использовать новые хуки в новых компонентах
3. Удаляйте useMemo и useCallback из старых компонентов — компилятор справится
4. Переделайте формы с использованием Actions и новых хуков
5. Постепенно переносите логику на серверные компоненты, если используете Next.js или похожий фреймворк

Перспективы развития и что ждёт дальше

React 19 — это не конечная точка, а середина пути. Команда разработчиков активно работает над расширением функциональности и интеграцией с экосистемой Meta (Facebook, WhatsApp и другие сервисы). Уже вышла версия React 19.2, которая добавила Частичное предварительное рендеринг для React DOM и новый примитив для выражения приоритетной работы UI.

Главное, что стоит понимать — React 19 меняет философию разработки. Вместо того чтобы разработчик думал об оптимизации, фреймворк берёт это на себя. Вместо клиент-серверного разделения на уровне архитектуры, оно становится более гибким и зависит от конкретной задачи. Это означает, что в будущем приложения будут быстрее, проще в поддержке и безопаснее.