Home Original page

startTransition – React

startTransition позволяет обновлять состояние без блокировки интерфейса.

Справочник

startTransition(action)

Функция startTransition позволяет пометить обновление состояния как переход.

import { startTransition } from 'react';
function TabContainer() {
const [tab, setTab] = useState('about');
function selectTab(nextTab) {
startTransition(() => {
setTab(nextTab);
});
}
// ...
}

См. другие примеры ниже.

Параметры

  • action: Функция, которая обновляет состояние, вызывая одну или несколько функций set. React немедленно вызывает action без параметров и помечает все обновления состояния, запланированные синхронно во время вызова функции action, как переходы. Любые асинхронные вызовы, ожидаемые в action будут включены в переход, но в требуют обернуть все функции set после await в дополнительный startTransition (смотрите Решение проблем). Переходы будут неблокирующими и не будут отображать нежелательные индикаторы загрузки.

Возвращаемое значение

startTransition ничего не возвращает.

Замечания

  • startTransition не предоставляет способа отслеживать, ожидает ли переход выполнения. Чтобы показать индикатор ожидания во время выполнения перехода, необходимо использовать useTransition.

  • Вы можете обернуть обновление в переход только в том случае, если у вас есть доступ к функции set для этого состояния. Если вы хотите начать переход в ответ на какой-то проп или значение, возвращаемое пользовательским хуком, попробуйте использовать useDeferredValue.

  • Функция, передаваемая в startTransition, должна быть синхронной. React немедленно выполняет эту функцию, помечая как переходы все обновления состояния которые происходят во время ее выполнения. Если вы попытаетесь выполнить дополнительные обновления состояния позже (например, в таймауте), они не будут помечены как переходы.

  • Вы должны обернуть все обновления состояния, вызванные после асинхронных запросов в дополнительный startTransition, чтобы пометить их как переходы. Это известное ограничение, которое мы планируем исправить в будущем (смотрите Решение проблем).

  • Обновление состояния, помеченное как переход, будет прервано другими обновлениями состояния. Например, если вы обновите компонент диаграммы внутри перехода, но затем начнете вводить текст в поле ввода, пока диаграмма находится в процессе повторного рендеринга, React перезапустит процесс рендеринга компонента диаграммы после обработки обновления состояния в поле ввода.

  • Обновления перехода не могут использоваться для управления текстовыми полями ввода.

  • В случае наличия нескольких одновременных переходов, React в настоящее время группирует их вместе. Это ограничение, вероятно, будет устранено в будущих релизах.

Применение

Пометка обновления состояния как неблокирующего перехода.

Вы можете пометить обновление состояния как переход, обернув его в вызов startTransition:

import { startTransition } from 'react';
function TabContainer() {
const [tab, setTab] = useState('about');
function selectTab(nextTab) {
startTransition(() => {
setTab(nextTab);
});
}
// ...
}

Переходы позволяют сохранить отзывчивость обновлений интерфейса даже на медленных устройствах.

С помощью перехода ваш UI остается отзывчивым даже во время повторного рендера. Например, если пользователь нажимает на вкладку, но затем меняет свое решение и нажимает на другую вкладку, он может это сделать, не дожидаясь завершения первого перерендеринга.

Note