Handle React forms like a pro

Handling forms data, updates, and form reset in react can be hectic, especially in situations where the form has multiple input fields.

I made a 1-minute video on best practices in handling forms data in ReactJs

Was this tips helpful? What other ReactJs tips would you advise in react forms? Leave a comment below.

Thank you

Comments

[Rense Bakker]

I would advise to not use controlled inputs at all. You can access named input values inside the form element onChange (if you want to do validation) and onSubmit handler (if you want to submit the form data).

[Mykhailo Toporkov 🇺🇦]

In general for complex forms, it is better to use some specialized libs like react-hook-form or formik cause they provide more options for error handling and validation. But even so, instead many useState hooks better use only one with object sth like:

const [formData, setFormData] = useState({
    name: "",
    email: "",
})

<form>
    <Input id="name" value={formData.name}  onChange={e => setFormData(prev => ({...prev, name: e.target.value})} />
    <Input id="email" value={formData.name}  onChange={e => setFormData(prev => ({...prev, email: e.target.value})} />
</form>

[Nerina]

Handling forms' inputs with useState would cause a lot of renders of the component, isn't it better way to handle forms with useRef? Saludos!