Componentes controlados y no controlados en React

 ¿Cuál es la forma opuesta a lo que es un componente controlado en React?

La forma opuesta a un componente controlado en React es un componente no controlado.

🔹 Diferencia clave

• Componente controlado:

  • El valor del input (o cualquier elemento interactivo) está vinculado al estado de React.

  • React es la “fuente de la verdad”.

  • Ejemplo:

    jsx

    function Controlado() {
      const [valor, setValor] = useState("")
    
      return (
        <input
          value={valor}
          onChange={(e) => setValor(e.target.value)}
        />
      )
    }
    

• Componente no controlado:

  • El valor se maneja directamente en el DOM, no en el estado de React.

  • Usás una ref para acceder al valor cuando lo necesitás.

  • Ejemplo:

    jsx

    function NoControlado() {
      const inputRef = useRef(null)
    
      const manejarSubmit = () => {
        console.log(inputRef.current.value) // accede al valor directamente
      }
    
      return (
        <>
          <input ref={inputRef} />
          <button onClick={manejarSubmit}>Enviar</button>
        </>
      )
    }
    

🔹 Cuándo usar cada uno

• Controlados:

  • Cuando necesitás sincronizar el valor con el estado de React.

  • Ideal para formularios complejos, validaciones en tiempo real, UI dinámica.

• No controlados:

  • Cuando querés simplicidad y menos renders.

  • Útiles para formularios simples, integración con librerías externas, o cuando no necesitás controlar cada cambio.

✨ En resumen: la forma opuesta a un componente controlado es un componente no controlado, donde el DOM mantiene el estado del valor y React solo lo consulta cuando hace falta.

¿Querés que te arme una tabla comparativa entre controlados y no controlados (ventajas, desventajas, casos de uso) para que tengas una visión clara de cuándo conviene cada enfoque?