> Почему в React компоненте при вводе текста последний символ пропадает (React)

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

Проблема обычно вызвана использованием setState с функцией, которая не возвращает новое значение, или передачей в value пропа undefined после асинхронного обновления. Чаще всего это происходит при работе с управляемыми компонентами, когда состояние не успевает обновиться до следующего рендера, или при неправильной обработке события onChange - например, вызов event.preventDefault() или мутация event.target.value.

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

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

Основные сценарии:

1. Асинхронное обновление состояния: setState в React асинхронен. Если вы используете setState с объектом, а не с функцией-апдейтером, и полагаетесь на текущее значение, может возникнуть race condition. Например, при быстром вводе несколько вызовов onChange могут использовать устаревшее состояние.

2. Неправильная обработка события: Если в onChange вызван event.persist() или event.preventDefault(), это может нарушить нормальный поток. В React 16 и старше синтетические события пулятся, и доступ к event.target.value после асинхронного вызова может вернуть undefined.

3. Использование value без onChange: Если компонент управляемый (есть value), но onChange не обновляет состояние, React будет перерисовывать поле с предыдущим значением, отбрасывая новый ввод.

4. Проблемы с controlled/uncontrolled: Переключение между управляемым и неуправляемым режимом (например, value становится undefined или null) приводит к тому, что React теряет контроль над вводом.

5. Debounce или throttle: Если вы применяете debounce к onChange, но не обновляете состояние мгновенно, символ может быть "потерян" до следующего рендера.

На практике

Чаще всего проблема возникает в формах с валидацией или трансформацией ввода. Например, при фильтрации символов или преобразовании ввода в uppercase. Разработчик может попытаться изменить значение в onChange через setState, но из-за асинхронности React не успевает обновить поле до следующего события ввода.

Ещё один частый случай - использование useState с функцией, которая не возвращает новое значение:

JAVASCRIPT
const [value, setValue] = useState('');
const handleChange = (e) => {
  setValue(e.target.value); // работает
  // setValue(e.target.value.toUpperCase()); // может вызвать проблему, если не обработать
};

Если в setValue передать функцию, которая не возвращает ничего (например, setValue(() => {})), состояние станет undefined, и поле ввода очистится.

Пример кода

Проблемный вариант:

JAVASCRIPT
function Input() {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    // Асинхронный вызов, который не обновляет состояние мгновенно
    setTimeout(() => {
      setValue(e.target.value); // e.target.value может быть устаревшим
    }, 100);
  };

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

Решение - синхронное обновление:

JAVASCRIPT
function Input() {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    const newValue = e.target.value;
    setValue(newValue); // синхронно сохраняем значение
  };

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

Если нужна трансформация, делайте её после сохранения:

JAVASCRIPT
const handleChange = (e) => {
  const raw = e.target.value;
  const transformed = raw.toUpperCase();
  setValue(transformed);
};

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

Начните с диагностики: спросите, как именно реализован компонент - управляемый или неуправляемый. Предложите проверить, что onChange действительно вызывается и обновляет состояние. Укажите на типичные причины: асинхронность setState, проблемы с event pooling, неправильная обработка ввода. Покажите пример кода с правильной синхронизацией. Если кандидат упоминает debounce, объясните, как правильно его интегрировать с управляемым компонентом (через useRef или отдельное состояние).

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

Интервьюер оценивает понимание жизненного цикла React-компонентов, механизма синтетических событий и асинхронности setState. Важно показать, что вы знаете разницу между controlled и uncontrolled компонентами, умеете отлаживать проблемы с вводом и понимаете, как React обрабатывает события. Также проверяется способность предложить конкретное решение, а не просто назвать причину.

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

• Предложение использовать forceUpdate или key для принудительного рендера - это не решает проблему, а маскирует её.
• Утверждение, что проблема в React версии - обычно это ошибка реализации, а не фреймворка.
• Использование event.persist() без понимания, зачем это нужно - в большинстве случаев это избыточно.
• Попытка решить проблему через useRef и прямую манипуляцию DOM - это нарушает принципы React.
• Неучёт того, что setState с функцией-апдейтером решает проблему race condition, но не проблему с event pooling.