В чем разница между работой внутри в React Hook Form и в Formik?

Внутреннее устройство противоположное: Formik хранит все значения в React-state и работает через управляемые поля; React Hook Form — через неуправляемые поля с регистрацией по ref и подписками.

Formik изнутри

• Значения, ошибки, touched — в state компонента <Formik>.
• Поля управляемые: value={values.email} + handleChange → setState на каждое нажатие.
• Каждый setState — ререндер всего поддерева формы (все поля, прогон валидации по умолчанию).
• Оптимизации (FastField) — точечные заплатки поверх архитектуры.

<Formik initialValues={{ email: '' }} onSubmit={submit}>
  {({ values, handleChange }) => (
    <input name="email" value={values.email} onChange={handleChange} />
  )}
</Formik>

React Hook Form изнутри

• Поле регистрируется через ref: RHF подписывается на нативные события input, значение остаётся в DOM.
• Значения и мета-состояние живут во внутреннем сторе вне React-state — ввод не вызывает ререндеров вообще.
• Ререндер — только по подписке: watch('field'), formState.errors перерисовывают подписанный компонент, а не форму.
• Валидация — по событиям (onChange/onBlur/onSubmit) точечно для поля; resolver'ы для схем (Zod/Yup).

const { register, handleSubmit, formState: { errors } } = useForm();

<input {...register('email', { required: true })} />

Следствия разницы

• Производительность: RHF не рендерит форму при вводе; Formik рендерит целиком на каждый символ — на больших формах разница драматична.
• Управляемые UI-библиотеки (MUI, Select'ы) в RHF подключаются через обёртку <Controller> — мост к управляемому миру.
• Ментальная модель: Formik «всё в React», RHF «форма в DOM, React уведомляется по подписке».

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

Formik: управляемые поля, значения в React-state, ререндер всей формы на каждое нажатие. RHF: неуправляемые поля через register/ref, значения во внутреннем сторе вне state, ререндеры только у подписчиков (watch/errors), Controller для управляемых компонентов. Отсюда разрыв в производительности в пользу RHF.