Лучшая либа для форм в React: Formik VS React Hook Form

На моем текущем проекте у нас встала задача выбрать библиотеку для работы с формами в React. Раньше в компании юзали Formik, а я слышал, что Formik - говно, но не знал толком почему. Поэтому решил поискать в инете альтернативы и, спойлер, я их нашел.

Так вот, в этом посте я расскажу, почему Formik жестко проигрывает React Hook Form. После прочтения ваши навыки формошлепства улучшатся минимум на 70% 😁.

Чем Formik плох?

1. Обновления формы после каждого изменения в любом input. Представьте форму, где есть, допустим, 10 input-ов разных типов (обычный input, select, textarea, file upload и др). Вы вводите символы в 1-й input, а это вызывает обновление всей формы. И обновление происходит на ввод каждого символа. Представьте, как проседает производительность!!!

React Hook Form, наоборот, изолирует обновление конкретного input-а. То есть, если в форме из 10 input-ов изменяется значение 3-го, то обновится только этот 3-й input (а не ВСЯ ФОРМА!). В основном, такая оптимизация Hook Form реализована благодаря неконтролируемым компонентам. В таких компонентах используется ref для получения значений input-а, а не value + onChange, как в контролируемых.

2. Ну и также немного технических характеристик.

Размер либы: Formik - 12.6kb; React Hook Form - 5.2kb.
Зависимости: Formik - 9; React Hook Form - 0 (нуль зависимостей!).

В общем и целом, на Formik стоит смотреть в последнюю очередь при выборе библиотеки для работы с формами. Как по мне, React Hook Form - это идеальный выбор для большинства решений. Есть еще хорошая либа React Final Form, но она не поддерживает валидацию через yup, поэтому мы от нее отказались на проекте.

А вы какие библиотеки используете при работе с формами? Напишите в комменты 😏.

————————————

Материалы:

Formik,
React Hook Form,
Статья "React Hook Form vs. Formik: A technical and performance comparison".