Handle React forms like a pro

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).

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>

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!