Как можно управлять input в React?

В React полем ввода управляют двумя способами: контролируемо (значение в состоянии) и неконтролируемо (значение хранит DOM).

Контролируемый input

function SearchField() {
  const [query, setQuery] = useState('');
  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
}

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

Неконтролируемый input

function SearchField() {
  const inputRef = useRef(null);
  const submit = () => console.log(inputRef.current.value);
  return <input ref={inputRef} defaultValue="" />;
}

• Значение читают, когда нужно (при отправке), через ref или FormData.
• Меньше перерисовок, проще для больших форм.
• Начальное значение — defaultValue, а не value.

Библиотеки и формы React 19

React Hook Form работает на неконтролируемых полях; в React 19 формы с action получают значения через FormData.

Частая ошибка

value без onChange делает поле только для чтения, а смена value с undefined на строку даёт предупреждение «uncontrolled → controlled».

Коротко для собеседования

Контролируемый input — value + onChange и состояние; неконтролируемый — defaultValue и ref/FormData; выбор — между удобством валидации и числом перерисовок.

Подробнее: React — input