Техпрогон
ВойтиНачать бесплатно
Выбор ответа Middle React 18-19: Suspense, transitions, RSC обновлено

Промис, созданный в рендере, и use

Вопрос

Что произойдёт с этим клиентским компонентом?

'use client';

function User({ id }) {
  const user = use(fetch(`/api/users/${id}`).then((r) => r.json()));
  return <h1>{user.name}</h1>;
}

Попробуйте сами

Выберите вариант, и откроется разбор.

Показать ответ и разбор

Коротко

Правильный ответ: Каждый рендер даёт новый промис, и компонент приостанавливается снова. use приостанавливает компонент, пока промис не выполнен.

Варианты ответа

  1. Всё работает: use кеширует промис по URL и не повторяет запрос
  2. Ошибка: use принимает контекст, а промис нужно ждать через await
  3. Данные загрузятся один раз, потом компонент перестанет обновляться
  4. Каждый рендер даёт новый промис, и компонент приостанавливается сноваправильный ответ

Разбор

use приостанавливает компонент, пока промис не выполнен. Когда React повторяет рендер, fetch вызывается заново и возвращает новый промис, которого React ещё не видел, и цикл повторяется. React предупреждает о некешированном промисе. Промис должен быть стабильным: его передают пропсом из серверного компонента, создают в загрузчике роутера или берут из кеша (например, библиотеки запросов).

  • use ничего не кеширует по URL.
  • Промисы use принимать может, это его основная работа.
  • Загрузка не завершится нормально из-за постоянных новых промисов.

Ответьте сами, а не прочитайте

В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.

Потренироваться бесплатно

Предыдущий вопрос

use в условии

Следующий вопрос

Что значит use server

Урок по теме

React 18-19: Suspense, transitions, RSC, компилятор

Термины по теме

'use client'Hydration mismatchTransition в React

Ещё по теме «React 18-19: Suspense, transitions, RSC»

Все вопросы модуля