> Что происходит при быстром вводе нескольких символов в input в React (React)

Короткий ответ

При быстром вводе нескольких символов в input в React каждый keypress вызывает перерендер компонента через обновление состояния (setState). React батчит (batch) синхронные вызовы setState в обработчиках событий, но при быстром вводе каждый символ - отдельный event loop tick, поэтому батчинг не работает. Это может приводить к потере символов, если состояние зависит от предыдущего без использования функциональной формы setState или useRef.

Подробное объяснение

React использует синтетические события (SyntheticEvent) для обработки ввода. При каждом нажатии клавиши:

1. Браузер генерирует input event
2. React создает SyntheticEvent и вызывает обработчик onChange
3. Внутри обработчика обновляется состояние через setState
4. React планирует ререндер компонента

До React 18 батчинг происходил только внутри обработчиков событий React. При быстром вводе каждый символ - отдельный event loop tick, поэтому setState не батчатся. Начиная с React 18, используется automatic batching, который объединяет обновления даже в setTimeout, промисах и нативных обработчиках. Однако при очень быстром вводе (например, с помощью IME или программного ввода) могут возникать race conditions.

Ключевая проблема - stale closure. Если setState использует текущее значение состояния без функциональной формы, то при быстром вводе несколько вызовов могут прочитать одно и то же устаревшее значение, что приведет к потере символов.

На практике

Для контролируемых инпутов используйте функциональную форму setState:

JSX
setValue(prev => prev + char)

Или useRef для хранения актуального значения без ререндера. Для сложных форм с валидацией и дебаунсом используйте библиотеки вроде React Hook Form или Formik, которые оптимизируют ререндеры.

При работе с IME (японский, китайский ввод) используйте onCompositionStart/onCompositionEnd для корректной обработки составных символов. Для high-frequency input (например, игровой ввод) рассмотрите использование нативных DOM-событий через ref.

Пример кода

JSX
// Проблемный вариант - потеря символов
function BadInput() {
  const [value, setValue] = useState('');
  const onChange = (e) => {
    setValue(value + e.target.value.slice(-1)); // stale closure
  };
  return <input value={value} onChange={onChange} />;
}

// Правильный вариант
function GoodInput() {
  const [value, setValue] = useState('');
  const onChange = (e) => {
    setValue(prev => prev + e.target.value.slice(-1)); // functional update
  };
  return <input value={value} onChange={onChange} />;
}

// Оптимизированный вариант с useRef
function OptimizedInput() {
  const ref = useRef(null);
  const [value, setValue] = useState('');
  
  useEffect(() => {
    const handler = (e) => {
      setValue(e.target.value);
    };
    ref.current.addEventListener('input', handler);
    return () => ref.current?.removeEventListener('input', handler);
  }, []);
  
  return <input ref={ref} />;
}

Как отвечать на собеседовании

Начните с механизма работы React с событиями и состоянием. Объясните проблему stale closure и батчинга. Упомяните различия между React 17 и 18. Приведите примеры потери символов и способы решения. Покажите понимание event loop и того, как React встраивается в его работу. Если спросят про оптимизацию, расскажите о debounce, throttle и useDeferredValue.

Что проверяет интервьюер

• Понимание внутреннего механизма React (event system, batching, reconciliation)
• Знание JavaScript event loop и асинхронности
• Умение работать с stale closure и race conditions
• Опыт оптимизации производительности форм
• Понимание различий между версиями React
• Знание нативных DOM-событий и их отличий от SyntheticEvent

Типичные ошибки

• Использование обычной формы setState вместо функциональной при зависимости от предыдущего состояния
• Игнорирование проблемы при работе с IME и составными символами
• Чрезмерная оптимизация с useCallback/useMemo без реальной необходимости
• Использование debounce на каждый символ без понимания UX-последствий
• Предположение, что React 18 automatic batching решает все проблемы с быстрым вводом
• Неправильная обработка composition events при работе с азиатскими языками