Controlled vs Uncontrolled

Definition

Controlled : la valeur est geree par React (via state + onChange). Uncontrolled : la valeur est geree par le DOM (via ref et defaultValue).

Analogie

Controlled = GPS qui te guide a chaque virage. Uncontrolled = carte papier que tu consultes quand tu veux.

Exemple de code

// Controlled
const [val, setVal] = useState('');
<input value={val} onChange={e => setVal(e.target.value)} />

// Uncontrolled
const ref = useRef();
<input defaultValue="" ref={ref} />
// ref.current.value pour lire

Cas d'usage

Controlled pour validation en temps reel, uncontrolled pour formulaires simples ou performance critique.

Anti-pattern

Termes lies