React 19: Новий API use(promise)

У цьому пості я покажу, як прочитати значення з проміса за допомогою use.

Посилання

• Демо
• Кодова база

Фрагмент

Ось код, який ми розглянемо:

import { Suspense } from "react";  

export default function Page() {  
 const messagePromise = fetchMessages();  

 return (  
   ⌛ чекаємо на повідомлення...
 );  
}  

Кілька речей, на які варто звернути увагу:
- Використовується , що фактично відображає запасний варіант, у цьому випадку: ⌛ чекаємо на повідомлення..., поки проміс не буде виконано.
- messagePromise — це проміс, який передається як пропс до .

Тепер давайте подивимося на fetchMessages:

async function fetchMessages() {  
 return [  
   {  
     id: 1,  
     text: "повідомлення 1",  
   },  
   {  
     id: 2,  
     text: "повідомлення 2",  
   },  
 ];  
}  

Як бачите, це дуже проста функція. У реальному світі це може бути запит fetch, але для спрощення функція просто повертає масив. Використовуючи async, JavaScript автоматично розуміє, що функція повертає проміс.

Нарешті, давайте подивимося на компонент ``:

function Message({ messagePromise }) {  
  const comments = use(messagePromise);  
  return comments.map((comment) => <p>{comment.text}</p>);  
}  

Ось тут і починається цікаве. Компонент `отримуєmessagePromise` як пропс, що, як ми вже згадували, є промісом.

Зазвичай ви використовуєте await з промісом, але в React 19 тепер можна використовувати use, щоб досягти того ж результату.

Одна ключова відмінність між await і use полягає в тому, що await блокує рендеринг до того, як проміс буде виконано, тоді як use не блокує рендеринг.

Ось як виглядає компонент до того, як проміс буде виконано:

React 19 use: до виконання промісу

І після того, як проміс буде виконано:

React 19 use: після виконання промісу

Висновок

use працює подібно до await, і якщо додаток працює на сервері з використанням SSR, результат буде точно таким же: сервер поверне однакову HTML-відповідь в обох випадках.

Однак, якщо код працює на клієнті, рендеринг буде трохи відрізнятися. await блокує рендеринг до того, як проміс буде виконано, тоді як use дозволяє компоненту перерендеритися після того, як проміс буде виконано.

Перекладено з: React 19: New API use(promise)