Hay dos formas de manejar un formulario en React, y elegir bien es la base de todo el módulo. En los
CONTROLADOS, React es la fuente de verdad de cada campo (el value + onChange que ya conoces del
módulo 2). En los NO CONTROLADOS, el DOM guarda el valor y tú lo lees solo cuando lo necesitas (con
una ref). Cada uno tiene su momento —y entender el trade-off explica POR QUÉ existe React Hook Form,
que verás en la próxima lección—. Hoy los comparas en vivo.
Dos formas de vigilar un campo
Los dos, lado a lado (en vivo)
Este playground tiene ambos formularios. Escribe en cada uno y fíjate en el contador de renders:
Escribe en el controlado: el contador de renders SUBE con cada tecla (React re-renderiza para
mantener el value en sync), pero a cambio sabe el valor en vivo ("{nombre}" ({nombre.length} letras)).
Escribe en el no controlado: el contador NO se mueve al teclear (el DOM maneja el texto); solo lees el
valor al enviar, con inputRef.current?.value. Ese es el trade-off en carne propia: el controlado
reacciona a cada tecla al costo de re-renders; el no controlado es liviano pero "ciego" hasta el final.
Cuándo cada uno
¿Cuál es la diferencia entre un formulario controlado y uno no controlado, y su trade-off?
Mini-reto
Experimenta con el trade-off: 1) al formulario CONTROLADO, agrégale validación en vivo —deshabilita un
botón "Guardar" mientras el nombre tenga menos de 3 letras (algo que el no controlado no puede hacer
fácil)—; 2) al NO CONTROLADO, agrégale un segundo campo email y léelo también al enviar con otra ref;
3) en un comentario, di cuál elegirías para un formulario de registro de 15 campos y por qué. Siente
cuándo el control en vivo vale su costo y cuándo no.
Qué sigue
Ya entiendes los dos enfoques y el trade-off. La próxima lección trae React Hook Form: la librería que
toma lo no controlado (rápido) y le suma la ergonomía de registro de campos, validación y manejo de
errores —el estándar para formularios en React—.