I've a complex form (with over than 70 inputs) and it has many different inputs and children forms... I've decided to add a from tag then repeat all inputs inside that:

<form>
  <input name="email" />
  <input name="age" />
  <input name="address" />
  .
  .
  .
  { loop on state (Array) to render other re-usable form component for category or city etc. }
  { another loop on state (Array) to render file inputs and checkboxes etc. }
  .
  .
  .
</form>

I actually should get an API data then generate that form to collect data from user (we haven't a fixed and common form, it depends on client and many things...). After that, I decided to forget controlled inputs, because I've to make a spaghetti and complex component to handle many states for this situation, I decided to use something like Formik, but that's not really easy! because I've to pass many API methods to handle custom inputs onChange values...

Therefore, I've decided to get form values by onSubmit event (without ref):

const handleSubmit = (e) => {
  e.preventDefault();
  const values = new FormData(e.target);
  sendForm(values); // sending form by post method and formData
}

<form onSubmit={handleSubmit}>
.
.
.
</form>

But I've an important question, does effect uncontrolled input on React performance? or it's not best practice and I've to find a solution to implement form by controlled inputs?