Что такое Scheduler в React?

Scheduler — это отдельный пакет внутри React (react-scheduler), который отвечает за планирование задач рендеринга. Его главная цель — не блокировать главный поток браузера надолго и выполнять более важные обновления раньше менее важных. Раньше React синхронно перерисовывал всё дерево, что могло приводить к «зависаниям» интерфейса при больших обновлениях.

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

Scheduler использует концепцию приоритетов. Каждое обновление получает уровень важности: например, ввод пользователя — высокий, а фоновое обновление списка — низкий. Задачи разбиваются на небольшие куски, и после каждого куска Scheduler проверяет, не пора ли вернуть управление браузеру, чтобы обработать события или отрисовать кадр.

• Immediate — синхронное выполнение (например, для дискретных событий).
• User-blocking — высокий приоритет, влияет на отзывчивость.
• Normal — обычные обновления состояния.
• Low / Idle — фоновые задачи, которые можно отложить.

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

В обычном коде вы редко работаете с Scheduler напрямую, но его эффект виден через API вроде useTransition или startTransition.

import { startTransition, useState } from 'react';

function Search() {
  const [input, setInput] = useState('');
  const [list, setList] = useState([]);

  const handleChange = (e) => {
    setInput(e.target.value); // высокий приоритет
    startTransition(() => {
      // низкий приоритет: тяжёлое обновление списка
      setList(filterHugeList(e.target.value));
    });
  };

  return <input value={input} onChange={handleChange} />;
}

Здесь ввод остаётся отзывчивым, а фильтрация большого списка выполняется в фоне. Scheduler сам решает, когда прервать эту работу, чтобы не блокировать UI.

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

Механизм лежит в основе Concurrent Rendering в React 18+. Он используется во всех обновлениях состояния, но особенно важен в приложениях с тяжёлыми вычислениями, большими списками и частыми обновлениями. Понимание Scheduler помогает писать более отзывчивые интерфейсы и правильно применять useTransition, useDeferredValue.

Итог: Scheduler стоит учитывать при оптимизации производительности React-приложений — он позволяет разделять срочные и несрочные обновления, делая интерфейс плавным даже при сложных вычислениях.