Возможно, наиболее важной функцией, представленной в React 18, является параллелизм.

В компьютерных науках параллелизм — это способность различных частей или единиц программы, алгоритма или задачи выполняться не по порядку или в частичном порядке, не влияя на конечный результат. Это позволяет параллельно выполнять параллельные модули, что может значительно повысить общую скорость выполнения в многопроцессорных и многоядерных системах. В более технических терминах параллелизм относится к возможности разложения программы, алгоритма или проблемы на независимые от порядка или частично упорядоченные компоненты или единицы вычислений.

Но, точнее говоря, функция параллелизма, представленная в React 18, связана с определением приоритета обновлений состояния, при котором мы можем поддерживать отзывчивость всего пользовательского интерфейса.

В проекте вам наверняка приходилось выводить на экран очень длинный список, и в этом случае ваша страница будет показывать все реакции пользователя с задержкой. В такой ситуации могут быть приняты различные решения, например, нумерация страниц или виртуализация являются одними из таких решений.

давайте посмотрим, как useTransition() решает нашу проблему:

Представьте, что у нас есть длинный список контактов, и мы хотим отобразить их в компоненте ContactList, а также у нас есть поле ввода для поиска, в котором мы можем выполнять поиск по всем контактам. Как вы можете себе представить, если у нас есть 10000 контактов, мы будем испытывать вялость пользовательского интерфейса при попытке поиска.

function App() {
  const [filterTerm, setFilterTerm] = useState('');

  const filteredContacts = filterContacts(filterTerm);

  return (
    <div id="app">
      <input type="text" onChange={updateFilterHandler} />
      <ContactList contacts={filteredContacts} />
    </div>
  );
}

Чтобы решить эту проблему, мы можем использовать хук useTransition().

function App() {
  const [startTransition, isPending] = useTransition();
  const [filterTerm, setFilterTerm] = useState('');

  const filteredContacts = filterContacts(filterTerm);

  function updateFilterHandler(event) {
    startTransition(() => {
      setFilterTerm(event.target.value);
    });
  }

  return (
    <div id="app">
      <input type="text" onChange={updateFilterHandler} />
      {isPending && <p>Updating List...</p>}
      <ContactList contacts={filteredContacts} />
    </div>
  );
}

Из useTransition возвращаются два значения:

  • startTransition — это функция. Мы будем использовать его, чтобы сообщить React, какое обновление состояния мы хотим отложить.
  • isPending — логическое значение. Это React сообщает нам, продолжается ли этот переход в данный момент.

Подпишитесь на меня в Medium или LinkedIn, чтобы узнать больше о React и JS!