Заметки про React: “Релиз React 19 Вышла стабильная версия React 19. Что появилось нового:…”

Релиз 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