startTransition

Посилання

startTransition(scope)

Функція startTransition дозволяє позначити оновлення стану як перехід.

import { startTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

Дивіться більше прикладів нижче.

Параметри

• scope: Функція, яка оновлює деякий стан шляхом виклику однієї або декількох функцій set. React негайно викликає scope без аргументів і позначає всі оновлення стану, заплановані синхронно під час виклику функції scope як переходи. Вони будуть неблокуючими і не відображатимуть небажані індикатори завантаження.

Повернення

startTransition нічого не повертає.

Застереження

• startTransition не надає можливості відстежити, чи знаходиться перехід у стані очікування. Щоб показати індикатор очікування під час виконання переходу, потрібно використовувати useTransition замість

.

• Ви можете обгорнути оновлення у перехід, лише якщо у вас є доступ до функції set цього стану. Якщо ви хочете запустити перехід у відповідь на якийсь проп або користувацьке значення хука, спробуйте useDeferredValue замість цього.

• Функція, яку ви передаєте в startTransition, має бути синхронною. React негайно виконує цю функцію, позначаючи всі зміни стану, що відбуваються під час її виконання, як переходи. Якщо ви спробуєте виконати більше оновлень стану пізніше (наприклад, під час таймауту), вони не будуть позначені як переходи.

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

• Оновлення переходу не можна використовувати для керування текстовим введенням.

• Якщо існує декілька поточних переходів, React наразі об'єднує їх разом. Це обмеження, яке, ймовірно, буде усунуто у майбутньому релізі.

Використання

Позначення оновлення стану як неблокуючого переходу

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

import { startTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

Переходи дають змогу підтримувати швидкість оновлення інтерфейсу користувача навіть на повільних пристроях.

За допомогою переходу ваш інтерфейс залишається чуйним посеред повторного рендерингу. Наприклад, якщо користувач натискає на вкладку, але потім передумує і натискає іншу вкладку, він може зробити це, не чекаючи завершення першого перерендерингу.