Controlados vs. no controlados: manejo de entradas de formulario

Al finalizar este tema

Comprenderás la diferencia entre los dos enfoques para manejar entradas en React y podrás elegir el más adecuado según el contexto.

Comportamiento predeterminado de HTML

Las entradas (input) de HTML gestionan su propio valor internamente:

<input type="text" />

Cuando el usuario ingresa datos, el propio elemento input almacena el valor. Esto funciona sin necesidad de que JavaScript intervenga.

En React, se debe elegir si React gestionará este valor o si se dejará que el elemento input lo gestione por sí mismo.

Controlado: React gestiona

function SearchBox() {
  const [query, setQuery] = useState("");

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />
  );
}

value se define como el estado y onChange actualiza el estado. Cada vez que el usuario escribe:

1. Se activa el evento onChange.
2. setQuery modifica el estado.
3. Se vuelve a renderizar el componente.
4. El campo de entrada muestra el nuevo valor.

React controla el valor del campo de entrada. Por eso se le llama "controlado".

Ventaja: control total sobre los valores de entrada. Permite la validación en tiempo real, la limitación de la entrada y el formateo.

function PhoneInput() {
  const [phone, setPhone] = useState("");

  const handleChange = (e) => {
    const cleaned = e.target.value.replace(/\D/g, "");
    if (cleaned.length <= 11) {
      setPhone(cleaned);
    }
  };

  return <input value={phone} onChange={handleChange} />;
}

Solo se pueden ingresar números y el límite es de 11 dígitos.

Sin control: El DOM gestiona

function FileUpload() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    const file = inputRef.current.files[0];
    console.log(file.name);
  };

  return (
    <div>
      <input type="file" ref={inputRef} />
      <button onClick={handleSubmit}>Upload</button>
    </div>
  );
}

ref accede directamente al elemento del DOM para leer su valor. No utiliza el estado de React. El propio input gestiona su valor y solo lo lee cuando sea necesario.

Debido a restricciones de seguridad, no se puede establecer programáticamente value en un input de archivo, por lo que debe usarse como un componente no controlado.

Criterios de selección

Cuándo usar un componente controlado (Controlled):

• Validación en tiempo real (verificación del formato del correo electrónico, límite de caracteres)
• Cuando se debe mostrar inmediatamente una interfaz de usuario diferente según el valor ingresado
• Al gestionar los valores de múltiples inputs con un único estado
• Cuando es necesario procesar los datos antes del envío del formulario

Cuándo usar un componente no controlado (Uncontrolled):

• Carga de archivos
• Cuando solo se necesita leer el valor en el momento del envío
• Al migrar formularios HTML existentes a React

En la mayoría de los casos, el componente controlado es la opción predeterminada. La documentación oficial de React también recomienda el uso de componentes controlados.

Concepto clave

El componente controlado tiene su valor gestionado por el estado de React. Permite un control en tiempo real. El componente no controlado tiene su valor gestionado por el DOM y se lee mediante ref solo cuando es necesario. En la mayoría de los formularios, el componente controlado es la opción predeterminada.