Зачем вам react-hook-form?

Вы, скорее всего, используете react-hook-form или Formik вместе с React. Но так ли нужны эти библиотеки?       Я уверен, что использование react-hook-form имеет смысл только если выполняются условия:

  • вам хватает встроенной в HTML валидации
  • проект не взаимодействует с API или взаимодействует исключительно через формы       В таком случае вы действительно можете использовать react-hook-form на полную, потому что не придётся добавлять библиотеки для валидации (Zod, Valibot…) и получения данных (React Query, SWR…)       react-hook-form предоставляет

для удобного отправления данных через формы, а также предоставляет возможность безопасно использовать валидацию формы. Если вы не знали, аттрибуты по типу required, minLength, max и т.д. можно запросто убрать через консоль разработчика. react-hook-form выполняет валидацию локально        Если вы уже используете библиотеки для валидации и получения данных, они уже заменяют вам

и валидацию. Остаётся 2 полезные фичи react-hook-form, которые можно запросто сделать самому:

  • handleSubmit
  • watch      Сначала добавим типы. Parsed уникален для каждой библиотеки валидации, я показываю пример с Zod. Это самая сложная часть:   type Parsed = z.SafeParseSuccess | (Omit, "error"> & { error: z.typeToFlattenedError["fieldErrors"] });  type FormState = Parsed | undefined;    Далее добавим простейшие функции:  (Тут был код, но он ломается в сетке. Он есть тут)   Я думаю даже объяснять не нужно, как эти функции работают. Вот документация для formData, Object.fromEntries(), Partial и Omit, если не знакомы. handleSubmit() тоже немного уникальна для каждой библиотеки валидации, но вам нужно просто применить валидацию к схеме    Пример использования: (Тут был код, но он ломается в сетке. Он есть тут)   Единственный минус - checkbox будет выдавать не то по дефолту, но это легко исправить