Заметки про React
Релиз React 19
Вышла стабильная версия React 19. Что появилось нового:
⭐️ Actions
В React одним из основных кейсов использования является выполнение мутаций и обновление стейта в ответ. В React 19 добавили поддержку использования асинхронных функций в переходах для автоматической обработки стейта pending, ошибок, форм и оптимистичных обновлений.
По соглашению функции, использующие асинхронные переходы, называются «Actions». Новые хуки, которые относятся к «Actions»:
🔴 useActionState – новый хук для основных кейсов с «Actions». В Canary версии назывался useFormState. Принимает функцию «Action» и возвращает «Action» для композиции.
const [error, submitAction, isPending] = useActionState(
async (previousState, newName) => {
const error = await updateName(newName);
if (error) {
return error;
}
return null;
},
null,
);
Возвращаемую функцию можно использовать как action в формах:
<form action={submitAction}>
🔴 useFormStatus – хук для отслеживания стейта форма. Используется в дочерних компонентах формы. Заменяет проп-дриллинг и контекст. Хук читает стейт родительской формы:
import {useFormStatus} from 'react-dom';
function DesignButton() {
const {pending} = useFormStatus();
return <button type="submit" disabled={pending} />
}
🔴 useOptimistic – хук для оптимистического отображения финального состояния запроса.
🔴 use – хук для чтения ресурсов. Например, можно читать Promise и React вызовет Suspend пока промис не зарезолвится. Также можно читать значение контекста:
import {use} from 'react';
function Comments({commentsPromise}) {
const comments = use(commentsPromise);
return comments.map(comment => <p key={comment.id}>{comment}</p>);
}
⭐️ Новые функции prerender и prerenderToNodeStream для генерации статики. Они предназначены для стриминга ответа через Node.js Streams и Web Streams. Пример:
import { prerender } from 'react-dom/static';
async function handler(request) {
const {prelude} = await prerender(<App />, {
bootstrapScripts: ['/main.js']
});
return new Response(prelude, {
headers: { 'content-type': 'text/html' },
});
}
⭐️ React Server Components. В React 19 включены все фичи серверных компонентов из Canary релиза, также есть Server Actions.
Улучшения в React 19:
⭐️ ref как проп. Больше не надо использовать forwardRef для прокидывания рефа:
function MyInput({placeholder, ref}) {
return <input placeholder={placeholder} ref={ref} />
}
<MyInput ref={ref} />
⭐️ ref колбек может вернуть функцию очистки, которая вызовется когда элемент будет удален из DOM:
<input
ref={(ref) => {
return () => {
// очистка
};
}}
/>
⭐️ Улучшенный отчет по ошибкам, например если произошла ошибка гидратации, то показывается дифф несоответствия.
⭐️ В React 19 можно использовать <Context> как провайдер вместо <Context.Provider>.
⭐️ Поддержка мета-тегов и тега style. Если добавить в компонент мета-теги или тег style, то React самостоятельно расположит их внутри head:
function BlogPost({post}) {
return (
<article>
<h1>{post.title}</h1>
<title>{post.title}</title>
<meta name="author" content="Josh" />
<link rel="author" href="https://twitter.com/joshcstory/" />
<link rel="stylesheet" href="foo" precedence="default" />
<meta name="keywords" content={post.keywords} />
</article>
);
}
Это будет работать и с серверным рендерингом.
⭐️ Появилась возможность указать браузеру о необходимости предзагрузки ресурсов через функции preload, preinit, prefetchDNS, preconnect. Эти вызовы функции преобразуются в соответствующие теги предзагрузки link в head.
https://react.dev/blog/2024/12/05/react-19
93 · 3.8K ·