Что такое контролируемые и неконтролируемые компоненты?

Работа с формами — один из базовых сценариев в React.

Определение

• Контролируемый компонент — значение элемента управляется через state

• Неконтролируемый компонент — значение хранится в DOM и читается через ref

Контролируемые компоненты

Особенности:

• значение задаётся через value

• изменения обрабатываются через onChange

• состояние всегда синхронизировано с UI

const [value, setValue] = useState('');

<input value={value} onChange={e => setValue(e.target.value)} />

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

Особенности:

• значение хранится в DOM

• используется defaultValue

• чтение происходит через ref

<input ref={inputRef} defaultValue="test" />

Сравнение подходов

Контролируемые:

• проще валидировать

• удобнее тестировать

• легче синхронизировать

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

• меньше кода

• подходят для простых форм

Краткий вывод

Контролируемые компоненты предпочтительны для сложных форм и бизнес-логики. Неконтролируемые подходят для простых сценариев.