🔥 Как ускорить работу с формами в React

🔥 Как ускорить работу с формами в React

Я часто использую библиотеку react-hook-form, и одна из самых частых задач — это создание динамических списков полей (например, список контактов пользователя).

Раньше я писал кучу ручного кода для добавления/удаления элементов, пока не открыл для себя хук useFieldArray.

Пример использования:

import { useForm, useFieldArray } from "react-hook-form";

function ContactForm() {

const { control, register, handleSubmit } = useForm({

defaultValues: {

  contacts: [{ value: "" }]

}

});

const { fields, append, remove } = useFieldArray({

control,

name: "contacts"

});

return (

<form onSubmit={handleSubmit(data => console.log(data))}>

  {fields.map((field, index) => (

    <div key={field.id}>

      <input {...register(`contacts.${index}.value`)} />

      <button type="button" onClick={() => remove(index)}>Удалить</button>

    </div>

  ))}

  <button type="button" onClick={() => append({ value: "" })}>Добавить контакт</button>

  <button type="submit">Отправить</button>

</form>

);

}

Этот код автоматически управляет всеми id полей и обновляет форму без лишней боли!

Если раньше вы управляли массивами вручную — попробуйте useFieldArray, вы удивитесь, насколько это проще.

❓ Пользуетесь ли вы react-hook-form или предпочитаете что-то другое для работы с формами?

✍️ @React_lib