Тихон | Помогаю разработчикам устроиться в BigTech

Новые клиентские хуки в 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 (
    <ul>
      {data.map((item, idx) => <li key={idx}>{item}</li>)}
    </ul>
  );
}

function App() {
  const dataPromise = fetch('/api/data').then(res => res.json());
  return (
    <Suspense fallback={<p>Загрузка данных...</p>}>
      <DataDisplay dataPromise={dataPromise} />
    </Suspense>
  );
}

export default App;

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

CodePunks | Mentorship

Please open Telegram to view this post

VIEW IN TELEGRAM

carbonated-jackrabbit-98d on Notion

Меня зовут Тихон, привет!👋 | Notion

Отзывы и офферы🏆

👍6🌚3🍓3❤2🎉1🐳1

www.tgoop.com/frontend_punks/18

9.1K viewsedited  May 10 at 04:35

Новые клиентские хуки в 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 (
    <ul>
      {data.map((item, idx) => <li key={idx}>{item}</li>)}
    </ul>
  );
}

function App() {
  const dataPromise = fetch('/api/data').then(res => res.json());
  return (
    <Suspense fallback={<p>Загрузка данных...</p>}>
      <DataDisplay dataPromise={dataPromise} />
    </Suspense>
  );
}

export default App;