В чём разница между контролируемыми (controlled) и неконтролируемыми (uncontrolled) инпутами?

Question

Accepted Answer

Всё сводится к тому, **кто является источником истины для значения инпута** — состояние React или сам DOM. ## Контролируемые (React владеет значением) Значение инпута управляется состоянием, а `onChange` держит состояние в синхронизации. DOM всегда отражает React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Поскольку состояние является источником истины, вы можете проверять, форматировать или преобразовывать значение при каждом нажатии клавиши (например, принудительно преобразовать в заглавные буквы, ограничить длину, отключить кнопку отправки). ## Неконтролируемые (DOM владеет значением) Браузер хранит значение; вы читаете его только при необходимости через ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Когда использовать что - **Контролируемые**: большинство форм — вы получаете валидацию, условный UI и единый источник истины. Минус в том, что происходит перерендер при каждом нажатии клавиши (обычно это незначительно). - **Неконтролируемые**: простые формы, file-инпуты (`` всегда неконтролируемый) или интеграция с non-React виджетами. Меньше кода, но вы не можете реагировать на изменения по мере их возникновения. Смешивание их (передача одновременно `value` и `defaultValue`) — частая ошибка, которая вызывает предупреждение React.