React Forms: Componentes Controlados vs No Controlados

Entre los elementos más comunes de una aplicación web son los formularios. Aquellos que te brindarán información del usuario. Al momento de implementar una tecnología como React, los mismos te ofrecen maneras de operar con formularios. En este articuló aprenderás las dos alternativas "nativas" de React para manejar estos elementos, cuando usar cada uno y las ventajas y desventajas de los mismos.

Componentes Controlados

Un campo de un formulario cuyos valores son controlados por React de esta forma es denominado “componente controlado”
Componentes Controlados - Documentación de React

Cuando usamos componentes controlados implica que React controlará el renderizado y la interacción con el usuario de un formulario. Para aplicarlo podemos crear un estado el cual estará conectado con las etiquetas de campo: input, textarea o select

export const Form = () => {
	const [nameInput, setNameInput] = useState("");

	const handleChange = (event) => {
    setNameInput(event.target.value);
  }

  const handleSubmit = (event) => {
    alert('A name was submitted: ' + nameInput);
    event.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={nameInput} onChange={handleChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

En esta solución realiza que React sea la "Fuente de la verdad" por este motivo, el valor que se muestra, el manejo del evento de cambio en el campo de texto y el estado están conectados todos entre sí y manejados por detrás con React.

Características principales

• La "fuente de la verdad" es React
• Si un campo de texto depende de la actualización de estado, es considerado un componente controlado
• No depende de la etiqueta form para que sea considerado un componente controlado
• Cada cambio en la información pasa por una actualización de estado

Ventajas de los componentes Controlados

• Debido a que todo está conectado entre sí, podemos controlar el formulario desde otras partes de la aplicación
• Puedes implementar validaciones en tiempo real cuando el usuario escribe, ya que los datos son actualizados en cada input

Desventajas de los componentes Controlados

• Si no están controlados, crean renders innecesarios, para solucionarlo se pueden aplicar varias técnicas, incrementando la complejidad del código.
• Incremento menor en las líneas de código.

Componentes No Controlados

"Los componentes no controlados, donde los datos del formulario son manejados por el propio DOM."
Componentes no controlados - Documentación de React

Los componentes no controlados como su nombre lo indica es lo contrario de un componente controlado. Es decir en un componente no controlado dejamos que el mismo formulario sea la "fuente de la verdad". Es lo más parecido al HTML de toda la vida. Un componente no controlado se puede realizar de dos formas, creando un ref por cada input o creando un ref para todo el formulario y usando la web API formData para el manejo del mismo.

Tecnica de componente no controlado, usando multiples ref de React

export const Form = () => {
	const inputRef = useRef(null);

	const handleSubmit = (event) => {
    alert('A name was submitted: ' + inputRef.current.value);
    event.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={inputRef} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

Características principales

• El DOM es el encargado de administrar la información
• Los inputs o el formulario deben estar conectados a un "ref" de React

Ventajas de los componentes no controlados

• Implementar un componente no controlado deja al HTML el manejo de los datos por lo cual significa que por parte del mismo no generará renders.
• Implementación rápida.

Desventajas de los componentes no controlados

• Debido a que un componente no controlado su información es más local que un componente controlado, el acceso a la información y manipulación del mismo en otros lugares de la aplicación llega a ser más complicado.

Conclusiones

Un componente controlado nos da mayor "control" como menciona su nombre de lo que está pasando con los valores en tiempo real, pero con cierto costo con respecto a líneas de código además que si no se lo controla puede crear renders innecesarios y un componente no controlado será aquel que te enteraras de lo que pasa después de algún evento perdiendo cierta información de lo que está pasando en tiempo real. Dependiendo del problema con el que te enfrentes utiliza la estrategia que mejor te parezca.