DEV Community

Cover image for Handle React forms like a pro
Melbite blogging Platform
Melbite blogging Platform

Posted on

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

Top comments (3)

brense profile image
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).

cookiemonsterdev profile image
Mykhailo Toporkov • Edited

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: "",

    <Input id="name" value={}  onChange={e => setFormData(prev => ({...prev, name:})} />
    <Input id="email" value={}  onChange={e => setFormData(prev => ({...prev, email:})} />
Enter fullscreen mode Exit fullscreen mode
ninacnel profile image

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!