Explica los componentes controlados frente a los no controlados y cómo eliges entre ellos para un formulario.

En un componente controlado el estado de React es la fuente de verdad: el input lee su valor del estado y cada pulsación pasa por onChange. En un componente no controlado el DOM guarda el valor y tú lo lees con una ref o desde los datos del formulario al enviarlo. Controlado te da validación en vivo y UI derivada; no controlado significa muchos menos renders y menos código en formularios grandes.

Controlado significa que React es dueño del valor: value sale del estado, onChange lo escribe de vuelta y el input no puede cambiar sin un render. No controlado significa que el dueño es el DOM y yo solo lo leo cuando lo necesito, con una ref o desde los datos del formulario enviado. Mi opción por defecto en formularios pequeños es controlado, porque normalmente quiero validar mientras el usuario escribe o tengo un campo que depende de otro. En cuanto un formulario pasa de unos quince o veinte inputs, o en cuanto tengo un campo que dispara un re-render caro con cada tecla, me paso a no controlado y valido en blur y al enviar. Eso es también lo que hacen por debajo las librerías de formularios populares: registran los inputs y se suscriben de forma acotada en lugar de volver a renderizar el formulario entero. Con las form actions de React 19 tiro todavía más a no controlado, porque la action recibe el FormData gratis, así que para un formulario simple de crear o editar puedo saltarme el estado por completo y gestionar solo los estados de pendiente y error con useActionState.