¿Cuál es la diferencia entre inputs controlados y no controlados?

Question

Accepted Answer

Se reduce a **quién es la fuente de verdad para el valor del input**: el estado de React, o el propio DOM. ## Controlado (React es dueño del valor) El `value` del input es manejado por el estado, y `onChange` mantiene el estado sincronizado. El DOM siempre refleja a React: ```jsx const [name, setName] = useState(""); setName(e.target.value)} // every keystroke updates state /> ``` Como el estado es la fuente de verdad, puedes validar, formatear o transformar en cada pulsación de tecla (p. ej. forzar mayúsculas, limitar la longitud, deshabilitar un botón de envío). ## No controlado (el DOM es dueño del valor) El navegador conserva el valor; lo lees solo cuando lo necesitas mediante un ref: ```jsx const inputRef = useRef(null); ; // on submit: const value = inputRef.current.value; ``` ## Cuándo usar cada uno - **Controlado**: la mayoría de los formularios; obtienes validación, UI condicional y una única fuente de verdad. La desventaja es un re-render por pulsación de tecla (normalmente despreciable). - **No controlado**: formularios simples, inputs de archivo (`` siempre es no controlado), o integración de widgets no-React. Menos código, pero no puedes reaccionar a los cambios a medida que ocurren. Mezclarlos (pasar a la vez `value` y `defaultValue`) es un error común y provoca una advertencia de React.