Заметки про React: “React 19 Beta Вышел релиз React 19 Beta. Что нового:

React 19 Beta

Вышел релиз React 19 Beta.

Что нового:

- Новый хук useActionState (вместо useFormState) для выполнения действий. Может использовать для выполнения асинхронных действий, также его можно передавать в action у тега form. Пример:


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}>
      {/* --snip-- */}
    </form>
  );
}

- Новый хук useFormStatus для получения статуса формы, в которой он находится. Хук получает статус родительской формы, как если бы форма была провайдером контекста.

- Новый хук useOptimistic для реализации оптимистичного UI. Пример:


const [optimisticName, setOptimisticName] = useOptimistic(currentName);

const submitAction = async formData => {
  const newName = formData.get("name");
  setOptimisticName(newName);
  const updatedName = await updateName(newName);
  onUpdateName(updatedName);
};

Хук useOptimistic вернет optimisticName, пока выполняется запрос updateName. Когда запрос завершится или произойдет ошибка, React переключится обратно на значение currentName.

- Новый хук use для чтения промисов.

Улучшения:

- Теперь ref передается как проп в функциональных компонентах. Функция forwardRef будет не нужна и станет deprecated.

- Показ diff для ошибок гидратации.

- Контекст как провайдер, т.е. <Context> вместо <Context.Provider>.

- В колбеке ref можно вернуть функцию очистки, которая будет вызываться при размонтировании компонента. Раньше React при размонтировании вызывал ref повторно с null. Если ref возвращает функцию очистки, то React пропускает повторный вызов ref с null при размонтировании.

- Появилась поддержка предварительной загрузки ресурсов. Новое API в React DOM для предзагрузки:


import { prefetchDNS, preconnect, preload, preinit } from 'react-dom'
function MyComponent() {
  preinit('https://.../path/to/some/script.js', {as: 'script' }) // loads and executes this script eagerly
  preload('https://.../path/to/font.woff', { as: 'font' }) // preloads this font
  preload('https://.../path/to/stylesheet.css', { as: 'style' }) // preloads this stylesheet
  prefetchDNS('https://...') // when you may not actually request anything from this host
  preconnect('https://...') // when you will request something but aren't sure what
}

https://react.dev/blog/2024/04/25/react-19