Новые клиентские хуки в React 19

В React 19 появился ряда новых хуков по упрощение работы с данными и формами на стороне клиента. Эти хуки делают разработку более декларативной и избавляют от необходимости использовать сторонние библиотеки.

⚡️Ключевые нововведения:

- use(Promise): Позволяет приостанавливать выполнение компонента до разрешения промиса, что упрощает выборку данных в сочетании с Suspense.
- use(Context): Расширяет возможности работы с контекстом, позволяя вызывать его внутри условий или циклов без лишней обертки.
- useFormState & useFormStatus: Облегчают управление состоянием форм, автоматически отслеживая статус отправки и предоставляя обратную связь пользователю.
- useOptimistic: Позволяет оптимистично обновлять интерфейс, мгновенно отображая изменения до получения окончательного ответа от сервера.

Основное - это возможность писать лаконичный код

Пример использования use(Promise):

import { use, Suspense } from 'react';

function DataDisplay({ dataPromise }) {
const data = use(dataPromise);
return (

{data.map((item, idx) => {item})}

);
}

function App() {
const dataPromise = fetch('/api/data').then(res => res.json());
return (



);
}

export default App;

Поделитесь, как вам эти нововведения, уже использовали в работе?

CodePunks | Mentorship