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

Сброс формы кажется тривиальным, но упирается в то, где живёт состояние и как React привязывает его к дереву.

Управляемая форма: сброс через state

const [form, setForm] = useState(initialValues);
const reset = () => setForm(initialValues);

Проблемы:

• Нужно помнить исходные значения отдельно (initialValues не должны мутировать; фиксировать в useRef или константой вне компонента).
• Сброс не трогает «побочные» состояния: touched, ошибки валидации, режим отправки, состояние дочерних компонентов (аккордеоны, загруженные файлы) — их нужно сбрасывать вручную и легко забыть.
• value={undefined} при сбросе в undefined переключает поле в неуправляемое: предупреждение «uncontrolled to controlled».

Неуправляемая форма

formRef.current.reset() возвращает defaultValue, а не текущее «исходное» состояние из данных; если defaultValue приходил из props и они изменились — reset вернёт не то, что ожидаешь.

Пропсы как initial state — классическая ловушка

const [name, setName] = useState(user.name); // «застынет» при смене user

Компонент не обновится при смене пользователя, и «сброс» вернёт старое значение.

Надёжное решение: смена key

<UserForm key={user.id} user={user} />

React размонтирует и создаст компонент заново — сбрасывается всё состояние поддерева, включая ошибки, touched и вложенные компоненты. Тот же приём для кнопки «Очистить»: key={resetCount}.

Библиотеки

React Hook Form: reset(values) — сбрасывает значения и мета-состояние (isDirty, errors) разом; Formik — resetForm(). Это правильный путь для сложных форм.

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

Проблемы: сброс значений не сбрасывает мета-состояние (errors, touched, вложенные компоненты); initialValues из props «застывают» в useState; form.reset() возвращает defaultValue, а не актуальные данные; undefined ломает управляемость. Надёжно: смена key (пересоздание поддерева) или reset() из React Hook Form.