Новые возможности и улучшения в React 19 Beta: обзор обновлений и оптимизация перехода

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 новой версии рекомендуется обратиться к официальной документации.