Сегодня покажу вам, как в React удобно работать с формами на базе react-hook-form. Это ...
Сегодня покажу вам, как в React удобно работать с формами на базе react-hook-form. Это мой go-to инструмент для любых форм в проектах. Почему именно react-hook-form? - ⚡ Быстрее, чем Formik (нет лишних ререндеров) - 🔍 Простая валидация через yup или zod - 🔌 Легко интегрируется с UI-библиотеками (MUI, Ant Design, Tailwind) Минималистичный пример: import { useForm } from "react-hook-form"; export default function MyForm() { const { register, handleSubmit } = useForm(); const onSubmit = data => console.log(data); return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register("email")} placeholder="Email" /> <input type="submit" /> </form> ); } Интеграция с Yup: import { useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; import * as yup from "yup"; const schema = yup.object({ email: yup.string().email().required(), }).required(); export default function ValidatedForm() { const { register, handleSubmit, formState: { errors } } = useForm({ resolver: yupResolver(schema), }); return ( <form onSubmit={handleSubmit(data => console.log(data))}> <input {...register("email")} /> <p>{errors.email?.message}</p> <button type="submit">Отправить</button> </form> ); } 🔥 Очень советую попробовать на новом проекте. Работать с формами становится не только проще, но и приятно. ✍️ @React_lib