Дмитрий
![Картинка поста Новые возможности и улучшения в React 19 Beta: обзор обновлений и оптимизация перехода](/_next/image?url=https%3A%2F%2Fcdn-bucket.hb.bizmrg.com%2Fpurple-images%2Fprofile-images%2Fdcfc3826-e14c-47d0-9dc1-572acee9f3f1.png&w=3840&q=75)
React получил новую бета-версию React 19, которая уже доступна на npm. Это предварительная версия позволяет библиотекам адаптироваться к грядущим изменениям и подготовить совместимость перед официальным выпуском. Разработчикам приложений рекомендуется обновиться до версии 18.3.0 и подождать стабильного релиза React 19.
Основные возможности и изменения в React 19
1. Actions (Действия):
Вместо того, чтобы самостоятельно управлять состоянием во время выполнения асинхронных задач (например, при отправке формы или изменении данных), React 19 предоставляет более удобный способ обработки состояний с использованием Actions. Они позволяют автоматически обрабатывать состояния ожидания, ошибки, оптимистические обновления и выполнение последовательных запросов.
Основные улучшения включают:
- Промежуточные состояния: Возможность легко управлять состоянием ожидания с использованием
useTransition
. - Обработка ошибок: Actions автоматически обрабатывают ошибки и отменяют оптимистические обновления при необходимости.
- Формы: Поддержка новой функциональности для
<form>
, которая позволяет передавать функции в атрибутыaction
иformAction
.
Пример с использованием <form>
и хука useActionState
:
function ChangeName({ name, setName }) {
const [error, submitAction, isPending] = useActionState(
async (previousState, formData) => {
const error = await updateName(formData.get("name"));
if (error) {
return error;
}
redirect("/path");
return null;
},
null,
);
return (
<form action={submitAction}>
<input type="text" name="name" />
<button type="submit" disabled={isPending}>Update</button>
{error && <p>{error}</p>}
</form>
);
}
2. Новый хук useActionState
:
Позволяет упростить работу с Actions, возвращая последнее состояние Action в виде данных и состояние ожидания.
const [error, submitAction, isPending] = useActionState(
async (previousState, newName) => {
const error = await updateName(newName);
if (error) {
// You can return any result of the action.
// Here, we return only the error.
return error;
}
// handle success
return null;
},
null,
);
3. Новая функциональность <form>
:
Поддерживает передачу функций как значения атрибутов action
и formAction
.
<form action={actionFunction}>
4. Хук useOptimistic
:
Помогает оптимистично отображать данные, пока идет асинхронный запрос.
function ChangeName({currentName, onUpdateName}) {
const [optimisticName, setOptimisticName] = useOptimistic(currentName);
const submitAction = async formData => {
const newName = formData.get("name");
setOptimisticName(newName);
const updatedName = await updateName(newName);
onUpdateName(updatedName);
};
return (
<form action={submitAction}>
<p>Your name is: {optimisticName}</p>
<p>
<label>Change Name:</label>
<input
type="text"
name="name"
disabled={currentName !== optimisticName}
/>
</p>
</form>
);
}
5. Новый API use
:
Позволяет читать ресурсы прямо во время рендеринга. Например, можно использовать Promise и обрабатывать его асинхронно, используя Suspense для отображения интерфейса загрузки.
import {use} from 'react';
function Comments({commentsPromise}) {
// `use` will suspend until the promise resolves.
const comments = use(commentsPromise);
return comments.map(comment => <p key={comment.id}>{comment}</p>);
}
function Page({commentsPromise}) {
// When `use` suspends in Comments,
// this Suspense boundary will be shown.
return (
<Suspense fallback={<div>Loading...</div>}>
<Comments commentsPromise={commentsPromise} />
</Suspense>
)
}
6. React Server Components и Server Actions:
Предоставляют новые возможности предварительной обработки компонентов и выполнения асинхронных действий на стороне сервера. Это позволяет передавать данные между клиентом и сервером более эффективно и с минимальными затратами по времени.
7. Улучшения и исправления:
ref
как проп: Поддержка передачиref
напрямую в функциональные компоненты, что делает их более гибкими и исключает необходимость вforwardRef
.- Диффы ошибок гидратации: Улучшенная обработка ошибок при гидратации с указанием различий между серверным и клиентским рендерингом.
<Context>
как провайдер: Теперь можно использовать<Context>
непосредственно как провайдер, что упрощает настройку иерархии контекстов.- Асинхронные скрипты: Поддержка асинхронных скриптов с автоматическим дублированием и загрузкой.
- Поддержка метаданных: Возможность легко управлять
<title>
,<meta>
и другими элементами из компонентов.
Вывод:
React 19 Beta предоставляет мощные новые инструменты для управления состоянием и обработки данных. Эти обновления позволят разработчикам создавать более отзывчивые и удобные приложения с улучшенной производительностью и новым функционалом. Для более подробного ознакомления с функциями и API новой версии рекомендуется обратиться к официальной документации.
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile
Комментарии
0