Выбор ответа Middle React 18-19: Suspense, transitions, RSC обновлено
Transition для значения поля
Вопрос
Почему поле ввода стало «залипать» и пропускать символы?
const [text, setText] = useState('');
const [isPending, startTransition] = useTransition();
<input
value={text}
onChange={(e) => startTransition(() => setText(e.target.value))}
/>
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Значение поля обновляется в переходе как несрочное и откладывается. Переходы прерываемы и откладываются ради срочных обновлений.
Варианты ответа
useTransitionнельзя вызывать вместе сuseStateв одном компоненте- Полю ввода нужен
key, иначе React пересоздаёт его при каждом переходе - Значение поля обновляется в переходе как несрочное и откладываетсяправильный ответ
- Переход синхронный и блокирует ввод, пока не закончится рендер списка
Разбор
Переходы прерываемы и откладываются ради срочных обновлений. Контролируемое поле должно показать символ сразу, иначе ввод выглядит сломанным. Правильно: setText вызывать обычным образом, а фильтрацию списка вынести в отдельное состояние внутри startTransition или использовать useDeferredValue(text) для списка.
- Хуки совместимы.
keyздесь ни на что не влияет.- Переход как раз не блокирует, проблема в том, что он несрочный.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.