Какие самые частые проблемы с формами в React?

Формы — самая ошибкоопасная часть React-приложений: там сходятся состояние, валидация, асинхронность и доступность.

Производительность управляемых форм

Каждое нажатие клавиши — setState и ререндер всей формы. На 30+ полях появляются лаги. Лечение: держать state ближе к полю, дебаунсить дорогие реакции, брать React Hook Form (неуправляемые поля + точечные подписки).

Смешение управляемого и неуправляемого

value={data?.name} при undefined делает поле неуправляемым, потом «управляемым» — предупреждение и потеря ввода. Лечение: всегда строка (value={name ?? ''}), не смешивать value и defaultValue.

Пропсы как начальное состояние

useState(props.value) — форма «застывает» при обновлении данных. Лечение: смена key для пересоздания или контролируемый компонент.

Сброс формы

Сбрасывают значения, забывая errors, touched, состояние дочерних компонентов. Лечение: reset() библиотеки или смена key всей формы.

Валидация

Разные правила на клиенте и сервере; валидация только на submit (плохой UX) или на каждый символ (шумно). Лечение: единая схема (Zod/Yup), общая с бэкендом по возможности; режим onBlur/onTouched, ошибки сервера — маппить на поля.

Асинхронность отправки

Двойной submit, гонки, отсутствие индикации, потеря введённого при ошибке. Лечение: disabled/pending состояние, отмена, сохранение черновика, читаемая обработка ошибок.

Доступность и семантика

Инпуты без label/htmlFor, ошибки без aria-describedby и role="alert", кнопка не внутри <form> (не работает Enter). Лечение: нативный <form onSubmit>, label для каждого поля, useId для связей.

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

Частые проблемы: ререндер всей формы на каждый ввод, смешение controlled/uncontrolled (undefined в value), props как initial state, неполный сброс (errors/touched), валидация не там и не тогда, двойной submit и необработанные серверные ошибки, отсутствие label/aria. Системное лечение — React Hook Form + схема Zod + нативная семантика формы.