Контролируемый — значение поля хранится в состоянии React (value + onChange): React — единственный источник истины, легко валидировать и форматировать на лету. Неконтролируемый — значение хранит сам DOM, читают через ref или FormData при отправке (defaultValue).
А ещё react-hook-form построен на неконтролируемых полях ради производительности
Так подсказку видит пользователь sotto на живом собеседовании — за пару секунд, пока вы думаете вслух.
Контролируемые поля перерисовывают компонент на каждое нажатие. На небольших формах это незаметно и даёт полный контроль: блокировать кнопку, показывать ошибки при вводе, приводить к верхнему регистру.
Неконтролируемые удобны, когда значение нужно только при отправке, и в больших формах, где рендер на каждый символ ощутим. Валидацию делают при отправке или через библиотеку.
Переключать поле между режимами нельзя: value={undefined}, а затем строка — предупреждение React; начальное значение задавать "".
sotto// контролируемый
const [email, setEmail] = useState("");
<input value={email} onChange={e => setEmail(e.target.value)} />
// неконтролируемый
function Form() {
const onSubmit = e => {
e.preventDefault();
const data = Object.fromEntries(new FormData(e.currentTarget));
send(data);
};
return <form onSubmit={onSubmit}><input name="email" defaultValue="" /></form>;
}sotto слышит вопрос интервьюера и показывает короткий ответ и план, как в блоке «Коротко». Оставьте контакт — пришлём доступ и промокод.