What is the difference between a controlled and uncontrolled component?

Controlled component — React state is the single source of truth. Every change goes through setState.

Uncontrolled component — the DOM stores the value. You pull it with a ref when needed.

// Controlled — React owns the value
function Controlled() {
  const [value, setValue] = useState('');
  return (
     setValue(e.target.value)}
    />
  );
}

// Uncontrolled — DOM owns the value
function Uncontrolled() {
  const inputRef = useRef(null);
  function handleSubmit() {
    console.log(inputRef.current.value); // pull on demand
  }
  return ;
}

When to use each:

• Controlled — instant validation, conditional disabling, dynamic inputs, format-on-type
• Uncontrolled — file inputs (always uncontrolled), integrating with non-React code, simple one-off forms where you only need value on submit