Componentes Controlados y No Controlados en Formularios React

Comprende, con ejemplos claros, cómo funcionan los componentes controlados y no controlados en React para manejar formularios. Verás cómo usar useState, useRef, el evento onChange y la reactividad para capturar y mostrar datos del usuario con precisión.

¿Qué son componentes controlados y no controlados?

Un componente controlado mantiene el valor del input en un estado local y actualiza la UI de forma reactiva con cada cambio del usuario. Esto da más control, facilita la validación y permite detectar errores antes.

En cambio, un componente no controlado no sincroniza el valor del input con el estado en cada pulsación. En su lugar, utiliza una referencia con useRef para leer el valor del DOM en un momento específico, por ejemplo, al hacer clic en un botón.

• Controlado: el input usa value + onChange para actualizar el estado en tiempo real.
• No controlado: el input usa ref para leer su valor solo cuando se necesita.
• Beneficio del controlado: mayor control, validaciones tempranas y UI siempre alineada con el estado.
• Beneficio del no controlado: simplicidad en casos puntuales donde solo lees el valor al final.

¿Cómo crear un componente controlado en React?

Aquí el valor del input vive en el estado. Cada vez que escribes, onChange ejecuta setValue(e.target.value) y la interfaz se vuelve a renderizar para mostrar el texto actualizado.

import React, { useState } from 'react';

export function ControlledComponent() {
  const [value, setValue] = useState('');

  return (
    <>
      <input
        type="text"
        placeholder="Ingresa el código del cupón (ej: 10 % off)"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <p>
        cupón de descuento: <b>{value}</b>
      </p>
    </>
  );
}

Claves del patrón:

• useState: crea y guarda el valor del input.
• onChange: toma e.target.value en cada tecla.
• Reactividad: al cambiar el estado, React vuelve a renderizar y la UI refleja el valor actual.
• Validación temprana: al tener el valor en estado, puedes validar mientras el usuario escribe.

¿Cómo implementar un componente no controlado con useRef?

En este patrón, el valor del input no se guarda en estado. Se lee bajo demanda usando useRef. Útil cuando solo necesitas el dato al enviar.

import React, { useRef } from 'react';

export function UncontrolledComponent() {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleSubmit = () => {
    if (inputRef.current) {
      alert(`Nuevo producto en el carrito: ${inputRef.current.value} 🛒✨`);
    }
  };

  return (
    <>
      <input
        type="text"
        placeholder="nombre del producto (ej: manzana)"
        ref={inputRef}
      />
      <button onClick={handleSubmit}>añadir al carrito</button>
    </>
  );
}

¿Cuándo elegir controlado o no controlado?

• Usa controlado si necesitas validaciones en vivo y errores tempranos.
• Usa no controlado si el formulario es simple y solo lees el valor al final.
• Recuerda: controlado = mayor control; no controlado = menor complejidad.

¿Qué habilidades prácticas refuerzas?

• Manejo de estado con useState y patrón de componente controlado.
• Lectura del DOM con useRef y patrón no controlado.
• Manejo de eventos con onChange y funciones como handleSubmit.
• Buenas prácticas de contenido: placeholder claro y ejemplos de entrada.

¿Qué keywords y datos importan?

• componentes controlados, componentes no controlados, formularios, inputs, useState, useRef, onChange, estado local, reactividad, renderizado, validación, TypeScript, ref, DOM, alert.

¿Te ha servido este tema o ya tuviste que elegir entre ambos patrones? Cuéntanos en los comentarios cómo lo aplicaste y qué dudas te quedaron.