Controlled vs uncontrolled input?

Understand the concept

A controlled input takes its displayed value from React state, with changes flowing through an event handler. An uncontrolled input keeps its current value in the DOM until the application reads it. Controlled inputs make coordinated validation and UI changes convenient, while uncontrolled inputs can keep simple forms less state-heavy.

Important ideas

• Controlled: React state supplies the value, updated through an event handler.

• Uncontrolled: the DOM keeps the value; read it through a ref or form submission.

• Validate on the server too; browser checks can be bypassed.

• Do not switch the same input unexpectedly from an undefined value to a controlled string value; initialize it consistently.

Example — controlled input:

import { useState } from 'react';

function NameInput() {
  const [name, setName] = useState('');
  return (
    <input
      aria-label="Name"
      value={name}
      onChange={event => setName(event.target.value)}
    />
  );
}

• The event updates state; the next render supplies the input's displayed value.