Controlled vs Uncontrolled Components

A username field must have at least three characters. A controlled version of the field can tell the user this while they type, and an uncontrolled version can tell them only after they press the button. That single difference is a good guide to choosing between the two approaches.

The Same Field, Built Both Ways

Here is the controlled version. It computes isTooShort from the state on every render and uses it for both the message and the button:

import { useState } from 'react';

function UsernameField() {
  const [username, setUsername] = useState('');