Что такое concurrent rendering в React? Как это работает и для чего нужно?

Что такое concurrent rendering?

Concurrent rendering — это подход в React, при котором рендеринг компонентов может быть прерван, приостановлен и возобновлен позже. Вместо того чтобы выполнять весь рендеринг синхронно и блокировать главный поток, React разбивает работу на мелкие части и выполняет их в фоновом режиме, отдавая приоритет срочным задачам, таким как ввод пользователя.

Это стало возможным благодаря новому алгоритму, представленному в React 18. Раньше рендеринг был синхронным: как только начинался, его нельзя было остановить. Теперь React может «заглянуть» в будущее и решить, какие обновления важнее, а какие можно отложить.

Как это работает?

React использует концепцию «временных срезов» (time slicing). Он разбивает рендеринг на небольшие куски и между ними проверяет, есть ли более срочные задачи. Если пользователь взаимодействует с интерфейсом, React прерывает текущий рендеринг, обрабатывает событие, а затем продолжает с того места, где остановился.

Для управления приоритетами используются хуки useTransition и useDeferredValue. Например, useTransition позволяет пометить обновление как «не срочное», чтобы React мог отложить его выполнение, не блокируя ввод.

import { useTransition, useState } from 'react';

function App() {
  const [isPending, startTransition] = useTransition();
  const [value, setValue] = useState('');
  const [list, setList] = useState([]);

  const handleChange = (e) => {
    setValue(e.target.value);
    startTransition(() => {
      // Тяжелая операция, например, фильтрация большого списка
      setList(filterItems(e.target.value));
    });
  };

  return (
    <div>
      <input value={value} onChange={handleChange} />
      {isPending ? 'Обновление...' : <List items={list} />}
    </div>
  );
}

Где применяется?

Concurrent rendering полезен в приложениях с большим количеством обновлений состояния, например, в редакторах кода, дашбордах с графиками или чатах. Он помогает избежать «зависаний» интерфейса при выполнении тяжелых вычислений, делая взаимодействие более отзывчивым.

Важно понимать, что concurrent rendering не делает код быстрее, он лишь распределяет нагрузку во времени, улучшая восприятие производительности.

Вывод

Используйте concurrent rendering, когда нужно сохранить отзывчивость интерфейса при частых и тяжелых обновлениях. Это особенно актуально для сложных приложений, где синхронный рендеринг может вызывать задержки и ухудшать пользовательский опыт.