Простой способ управления проверкой, ошибками, списком измененных полей и т. д.

Честно говоря, существует множество способов управления состоянием формы. У нас есть много вариантов в настоящее время. Наиболее популярны Formik, React Hook Form и React Final Form.

О, и вы можете сделать свой собственный крючок. Самое сложное здесь — выбрать правильный вариант для вашего проекта.

Моя история

Пару лет назад я исследовал управление формами в React в поисках лучшего решения для себя. Я хотел найти простой и красивый способ управления проверками и ошибками, вести список посещенных полей и многое другое.

Так что же он сделал? Я создал свой собственный крючок!

Да, я люблю программировать и люблю создавать свои решения. Это простой хук, который использует userReducer для управления состоянием формы. Изменения обновлялись при каждом нажатии клавиши в форме (мы все знаем, что это нормально для поведения React).

У меня там не было какой-то навороченной валидации, данные проверялись только при отправке, и все работало хорошо, но…

Проблемы

Производительность! Я не чувствовал этого в начале. Я использовал свой крючок во многих формах, и все было здорово, но мои формы росли; У меня были большие вложенные объекты, так что пришлось поколдовать с useMemo, useCalback и правильной композицией, и это помогло, но…

Я понял, что мое решение было слишком простым. Мне нужно было гораздо больше. Я хотел быстро определить, были ли внесены какие-либо изменения в форму, какие поля были изменены и т. д. Я, наверное, мог бы улучшить свой крючок и сделать его более «умным», но это заняло бы у меня гораздо больше усилий и времени. Если бы не было существующих решений, то ладно, но не тут то было.

Не поймите меня неправильно. Я не говорю об элементарных формах, где у вас есть одно или два поля ввода и одна кнопка. Вы можете легко жить без библиотеки.

Я понял, что не хочу тратить свое время на решение этих проблем; Я просто хотел найти библиотеку, которая бы делала все это и не вызывала бы перерисовку при каждом изменении формы.

И я начал изучать существующие решения.

В поисках ответа

На тот момент самым популярным был Formik. Если мы сейчас посмотрим на официальную документацию, то увидим, что это по-прежнему один из рекомендуемых способов.

Если вы ищете комплексное решение, включая проверку, отслеживание посещенных полей и обработку отправки форм, Formik — один из популярных вариантов. Однако он построен на тех же принципах управляемых компонентов и управления состоянием — так что не пренебрегайте их изучением.

Но, как я уже упоминал ранее, я не хотел перерисовывать форму при каждом изменении. Прочитав документацию и поэкспериментировав, я выбрал React Hook Form.

Почему форма React Hook?

  1. Использование useRef повышает производительность. Об этом можно прочитать в официальной документации.
  2. Вы можете использовать Yup для проверки.
  3. Отличная документация с большим количеством примеров.
  4. Вы можете зарегистрировать неконтролируемые компоненты или использовать контролируемые с помощью Controller из react-hook-form, что позволяет использовать компоненты из таких библиотек, как MatetialUi, AntTd, FluentUI и других.
  5. Библиотека использует хук useContext, поэтому вы можете передавать методы глубоко вложенным дочерним элементам.
  6. Если вы чувствуете себя комфортно с хуками, синтаксис RHF будет выглядеть очень знакомым и понятным.

Я почувствовал разницу, когда начал использовать эту библиотеку и увидел ее с React Profiler. Полезно видеть, как часто ваши компоненты перерисовываются и почему. Иногда это может помочь решить проблемы с производительностью.

Использование Yup

Я упоминал ранее, что мне нужно управлять проверкой, поэтому я использовал Yup для этого. Это фантастический способ проверки данных, потому что вы можете использовать его независимо или с другими библиотеками для управления состоянием.

Легко использовать yup для определения проверки; у вас есть много разных типов, и вы можете описать зависимости и свои правила проверки. В моем примере я указал «фамилию», которая требуется, когда значение заголовка поля равно «Тест». Посмотрите на этот пример, и вы увидите, как просто использовать Yup:

Использование формы React Hook

Использование компонентов из таких библиотек, как FluentUI, MaterialUI или других, помогает иметь возможность использовать контролируемые компоненты. Да, я не хотел их использовать, но React Hook Form позволяет мне использовать контролируемые компоненты, сводя к минимуму рендеринг. К сожалению, я не могу бесконтрольно использовать некоторые компоненты FluentUI, поэтому здорово, что RHF помогает оптимизировать производительность.

Хорошо, но как использовать эту библиотеку?

Во-первых, нам нужно установить два пакета: npm install react-hook-form yup. Мы можем передать значения по умолчанию и сказать, как часто мы хотим проверять нашу форму.

Затем нам нужно решить, какой тип компонентов мы будем использовать. Здесь у нас есть два варианта:

  1. Регистрация неконтролируемых компонентов
  2. Используйте оболочку с именем Controller для контролируемых компонентов.

Для второго варианта вам нужно будет обернуть ваш компонент Controller из RHF. Вот мой пример с TextField из библиотеки FluentUI.

Лучше всего то, что мы можем комбинировать два варианта и использовать оба способа в одной форме, если нам это нужно. Вот мой пример с контролируемыми компонентами:

Вот и конечный результат — быстро и легко.

Это все об управлении состоянием формы в React с помощью React Hook Form и Yup. Я надеюсь, что эти библиотеки помогут и вам.