Что нового появилось в React 19?

Основные нововведения React 19

React 19 представляет собой значительное обновление, которое улучшает производительность, упрощает разработку и расширяет возможности фреймворка. Ключевые изменения включают новый хук use(), улучшенную поддержку серверных компонентов, Actions для работы с формами и оптимистичные обновления.

Новый хук use()

Хук use() позволяет загружать данные асинхронно прямо внутри компонента, заменяя необходимость в useEffect для простых запросов. Он работает с промисами и контекстом, упрощая код.

import { use } from 'react';

function UserProfile({ userId }) {
  const user = use(fetchUser(userId));
  return <div>{user.name}</div>;
}

Server Components и Actions

React 19 улучшает поддержку серверных компонентов, позволяя выполнять код на сервере и отправлять только готовый HTML. Actions — это новый паттерн для обработки форм, который автоматически управляет состоянием загрузки и ошибками.

'use server';

export async function submitForm(formData) {
  const name = formData.get('name');
  // обработка данных
}

Оптимистичные обновления

Хук useOptimistic позволяет мгновенно обновлять UI, пока сервер обрабатывает запрос, и откатывать изменения в случае ошибки.

const [optimisticState, addOptimistic] = useOptimistic(state, (currentState, newValue) => {
  return { ...currentState, value: newValue };
});

Вывод

React 19 упрощает разработку, особенно в асинхронных сценариях и при работе с формами. Эти нововведения стоит применять в новых проектах для повышения производительности и читаемости кода.