Common React Form Mistakes With Controlled and Uncontrolled Inputs

Common React Form Mistakes With Controlled and Uncontrolled Inputs

Forms are where React beginners make the most mistakes. Here are the common ones with controlled and uncontrolled inputs and how to avoid them.

Setting value Without onChange

Setting value on an input without an onChange handler makes it read-only and warns. Either add onChange to make it controlled, or use defaultValue for an uncontrolled input.

Mutating State Directly

Mutating the state object instead of creating a new one means React may not detect the change. Always create a new state object, especially for forms with many fields.

One Handler Per Field

Writing a separate handler for every field is verbose. Use a single handler that updates state by field name, so one function handles the whole form.

Not Preventing Default on Submit

Forgetting preventDefault on the form's onSubmit causes a full page reload. Always prevent default and handle the submission in JavaScript.

No Validation Until Submit

Validating only on submit gives poor UX. Validate as the user types or on blur, so they get immediate feedback instead of errors only after submitting.

Losing Input Focus

Rendering inputs without stable keys in a list can cause focus loss and input swapping. Use stable unique keys for every input in a list.

Not Resetting After Submit

Forgetting to reset the form state after a successful submit leaves stale data in the inputs. Clear the state to give a clean next submission.

The Takeaway

Common form mistakes include value without onChange, mutating state, one handler per field, missing preventDefault, late validation, focus loss from bad keys, and not resetting after submit. Fix these and forms behave reliably.