React 2026: хук use() - новый способ работы с асинхронностью⁠⁠

В 2026 году в React появился хук use(), который меняет подход к работе с асинхронными данными и контекстом. Он входит в состав React 19 и уже доступен в стабильной версии.

Проблема, которую решает use()

Раньше загрузка данных в компоненте требовала написания однотипного кода:

• useState для хранения данных

• useState для состояния загрузки

• useState для ошибки

• useEffect для выполнения запроса

• Ручное обновление всех состояний

Этот подход работал, но создавал много шаблонного кода и размазывал логику по разным хукам.

Как работает use()

use() -это хук, который принимает промис и «разворачивает» его прямо в теле компонента. Если промис ещё не завершился, React приостанавливает рендеринг компонента. Когда промис резолвится, компонент перерендеривается с полученными данными.

import { use, Suspense } from 'react';
function UserProfile({ userId })
{ const user = use(fetchUser(userId));
return <div>{user.name}</div>; }

Здесь fetchUser(userId) возвращает промис. use() блокирует рендеринг до тех пор, пока этот промис не будет разрешён.

Роль Suspense

Для корректной работы use() необходимо использовать компонент Suspense. Он отлавливает состояние «приостановки» дочернего компонента и показывает fallback-интерфейс.

function App()

{ return

( <Suspense fallback={<div>Загрузка...</div>}>

<UserProfile userId="123" />

</Suspense> ); }

Пока UserProfile ожидает данные, пользователь видит сообщение «Загрузка...». После завершения запроса fallback заменяется на готовый UI.

Обработка ошибок

Ошибки, возникающие внутри use(), не обрабатываются автоматически. Для их перехвата используется ErrorBoundary — компонент, который ловит ошибки в дочерних компонентах.

<ErrorBoundary

fallback={<div>Ошибка загрузки</div>}>

<Suspense fallback={<div>Загрузка...</div>}>

<UserProfile userId="123" />

</Suspense>

</ErrorBoundary>

Это стандартный для React подход к обработке ошибок.

Детали реализации

use() не создаёт новый запрос при каждом рендере. Если переданный промис уже был разрешён, use() возвращает данные мгновенно.

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

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

Сравнение: старый подход vs новый подход

Без use() (традиционный способ):

function UserProfile({ userId })

{ const [user, setUser] = useState(null);

const [loading, setLoading] = useState(true);

const [error, setError] = useState(null);

useEffect(() => { fetchUser(userId) .then(setUser) .catch(setError) .finally(() => setLoading(false));

}, [userId]);

if (loading) return <div>Загрузка...</div>;

if (error) throw error;

return

<div>{user.name}</div>; }

С use() (новый способ):

function UserProfile({ userId })

{ const user = use(fetchUser(userId));

return <div>{user.name}</div>; }

Код сокращается в 3–4 раза, логика становится декларативной.

use() — это новый инструмент в экосистеме React, который делает код более читаемым и предсказуемым. В сочетании с Suspense и ErrorBoundary он позволяет строить компоненты, которые описывают что должно отображаться, а не как это должно загружаться. Это шаг в сторону декларативной модели, к которой React стремится с момента своего появления.

Если вам интересна тема веб-разработки, я также публикую разборы других кейсов в своем Telegram-канале и на Максе. Буду рад единомышленникам.