# Form controllati e non: costi reali

Un campo controllato tiene il valore nello stato React, uno non controllato lo lascia al DOM: cambiano i render, la validazione e i file.

> Pagina: https://ui.eneawork.it/blog/react-form-controlled-vs-uncontrolled
> Markdown: https://ui.eneawork.it/blog/react-form-controlled-vs-uncontrolled.md

*2026-11-01*

Un form controllato tiene il valore nello stato React e lo aggiorna a ogni tasto; uno non controllato lascia il valore nel DOM e lo legge al submit.

Il catalogo EneUI conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, misurati da /api/stats il 1 novembre 2026. La cifra viene da una query all'endpoint, non da una stima: conta i record pubblicati, non la qualità dei componenti.

## Chi possiede il valore

Nel form controllato il valore vive in useState: React è l'unica fonte di verità, quindi il campo si può validare e formattare mentre si digita. Nel form non controllato il valore vive nell'elemento HTML: defaultValue imposta il valore iniziale, FormData o un ref lo leggono alla fine. La differenza non è di stile, è chi comanda.

## I due schemi, affiancati

function Controlled() { const [email, setEmail] = useState(""); return setEmail(e.target.value)} />; } function Uncontrolled() { return ; }

Il primo schema rifà il render del componente a ogni carattere; il secondo lascia fare al browser e costa zero render fino al submit.

## Il costo che si paga

## Un progetto da cui partire

npm create vite@latest form-demo -- --template react cd form-demo npm install npm run dev

Vite, distribuito con licenza MIT, crea il progetto e avvia il server di sviluppo; il campo si modifica in src/App.jsx senza toccare la configurazione.

## Record vivi nel catalogo

Tre componenti mostrano i due schemi in uso: credit-card-form, con i campi controllati da una maschera, login-form e otp-input. Per sfogliare per categoria parti da 111.985 componenti.

## La limitazione

Nessuno dei due schemi vince sempre. Lo stato controllato in un form grande sposta il costo su React: ogni tasto rirenderizza, e senza stato locale o memo il campo diventa lento. Lo schema non controllato perde la validazione in tempo reale e i campi dipendenti, perché React non vede il valore finché non lo chiedi.

## Dove continuare

Il modello generale è in che cos'è React; il confronto fra le librerie di form misurate è in librerie form React; la scelta fra i due framework più diffusi è in Vue 3 vs React.

## FAQ

### Quale schema conviene per un login?

Il controllato, di solito. Due campi e un pulsante costano pochi render, e la validazione immediata vale più del risparmio.

### Posso mescolare controllati e non controllati?

Sì, e spesso è la scelta giusta. Il campo di ricerca e i file restano non controllati, il resto va nello stato o in una libreria di form.

### Perché un input file non si può controllare?

Perché il browser non consente di impostare il valore di un input di tipo file per sicurezza. Si legge da FormData o da un ref.

### Un controlled input lento è un problema del browser?

No, del componente. Lo stato troppo in alto rirenderizza l'intero form: sposta lo stato nel campo o usa react-hook-form.

### react-hook-form è obbligatorio per i form grandi?

No, ma evita il costo per tasto con campi non controllati e sottoscrizioni per campo. È distribuito con licenza MIT.