Расскажите про Concurrent Mode и startTransition.

Что такое Concurrent Mode?

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

Что такое startTransition?

startTransition — это функция из React 18, которая позволяет пометить обновление состояния как «переходное» (transition). Такие обновления считаются низкоприоритетными: React может отложить их рендеринг, если есть срочные обновления (например, нажатия клавиш). Это полезно для операций, которые не требуют мгновенного результата, например, фильтрация большого списка или переключение вкладок.

Пример использования

import { startTransition, useState } from 'react';

function Search() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleChange = (e) => {
    const value = e.target.value;
    setQuery(value); // срочное обновление
    startTransition(() => {
      setResults(filterLargeList(value)); // низкоприоритетное
    });
  };

  return (
    <div>
      <input value={query} onChange={handleChange} />
      <ul>{results.map(item => <li key={item.id}>{item.name}</li>)}</ul>
    </div>
  );
}

Здесь ввод текста обновляет поле мгновенно, а фильтрация списка происходит в фоне, не блокируя ввод.

Когда применять?

Используйте startTransition для обновлений, которые не критичны для немедленного отклика, но могут быть дорогими по вычислениям. Concurrent Mode включается автоматически в React 18, но startTransition — это явный способ управлять приоритетами. Это особенно полезно в приложениях с большими списками, сложными формами или при работе с внешними данными.

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