React 19 развивает асинхронные переходы

React 19, последняя версия JavaScript-библиотеки Meta для рендеринга пользовательских интерфейсов, уже доступна в бета-версии. Обновление представляет такие возможности, как асинхронные функции в переходах и возможность доступа к ref в качестве prop для компонентов функции.

Бета-версия React 19 была представлена 25 апреля. Опубликовано руководство по обновлению React 19 beta.

В React 19 добавлена поддержка использования асинхронных функций в переходах для автоматической обработки отложенных состояний, форм, ошибок и оптимистичных обновлений. Функции, использующие async-переходы, называются Actions. Опираясь на Actions, React 19 представляет useOptimistic для управления оптимистичными обновлениями и новый хук React.useActionState для обработки общих случаев для Actions. Actions также интегрированы с новыми функциями <form> для react-dom в React 19.

React 19 включает все возможности React Server Components из канала Canary, а это значит, что библиотеки, поставляемые с Server Components, теперь могут нацеливаться на React 19 как на зависимость с условием экспорта react-server для использования во фреймворках, поддерживающих Full-stack React Architecture.

Другие улучшения в React 19:

• Появился новый API для чтения ресурсов в рендере, называемый use.
• Улучшены отчеты об ошибках при гидрировании в react-dom.
• Улучшена поддержка асинхронных скриптов; их можно рендерить в любом месте дерева компонентов.
• Предложены API для загрузки и предзагрузки ресурсов браузера для создания впечатлений, не связанных с неэффективной загрузкой ресурсов.
• Улучшена гидратация для учета сторонних скриптов и расширений браузера.
• Обработка ошибок была улучшена для устранения дублирования и предоставления опций для обработки пойманных и не пойманных ошибок.
• Добавлена поддержка нативного отображения тегов метаданных документа в компонентах.
• <Context> может быть отображен как провайдер вместо <Context.Provider>.
• Функции очистки могут быть возвращены из обратных вызовов ref.
• В useDeferredValue добавлена опция initialValue.