Про новий хук `use`

Хук дозволяє вам працювати з промісами так, наче це звичайні значення:

const user = use(Promise.resolve({ name: 'Vitalii' }));
return <>{user.name}</>;

Більше того, це єдиний хук який можна використовувати умовно, в тому числі в тернаних операторах:

if (!userId) return <>User not found</>;
const user = use(Promise.resolve({ name: 'Vitalii' }));
return <>{user.name}</>;

Хук use також можна використати для отримання контексту. Різниця між use та useContext полягає в тому, що useContext не можна використовувати умовно. А use можна.

Ось так просто це виглядає. Але є кілька нюансів, які ще й відрізняються в залежності від того чи це чистий React чи Next.

Про React

1. Use не доступний в React 18.2. Для того щоб його використати потрібно встановити react@canary версію, про це буде окремо.
2. Для того аби цей хук працював як очікувано, компонент в якому використаний хук use має бути огорнуто в компонент Suspense, який також показує індикацію завантаження
3. На версії 18.3.0-canary-247738465-20240130, ErrorBoundaries з rejected promise не працюють, хоча мають.

Про Next.JS (дожились, да?)

1. Use доступний в останній версії Next. Встановлювати щось додаткове не потрібно.
2. Хук працює лише в серверних компонентах (чому??), але не потребує використання Suspense
3. Для індикації завантаження можна використовувати файл loading.tsx
4. Для відображення помилки можна використовувати компонент error.tsx

Але в серверних компонентах можна використовувати async/await що виглядає простіше.

В підсумку - на мене виглядає все "дуже цікаво", але або недопрацьовано (react), або недопрацьовано і безтолково (next). Але це моя особиста думка.

@reactbeginners