Componentes Controlados vs No Controlados — Elige quién es propietario del estado: el componente o su padre

// Controlado — el padre es propietario del estado
function ControlledInput() {
  const [value, setValue] = useState("");
  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}
 
// No controlado — el DOM es propietario del estado
function UncontrolledInput() {
  const ref = useRef<HTMLInputElement>(null);
  const handleSubmit = () => console.log(ref.current?.value);
  return <input ref={ref} defaultValue="" />;
}
 
// Flexible — soporta ambos modos
function FlexibleInput({
  value: controlledValue,
  defaultValue = "",
  onChange,
}: {
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
}) {
  const [internalValue, setInternalValue] = useState(defaultValue);
  const isControlled = controlledValue !== undefined;
  const value = isControlled ? controlledValue : internalValue;
 
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!isControlled) setInternalValue(e.target.value);
    onChange?.(e.target.value);
  };
 
  return <input value={value} onChange={handleChange} />;
}

import { useState, useRef, useCallback, type ReactNode } from "react";
 
// Un componente Toggle que soporta uso controlado y no controlado
interface ToggleProps {
  pressed?: boolean;
  defaultPressed?: boolean;
  onPressedChange?: (pressed: boolean) => void;
  children: ReactNode;
}
 
function Toggle({
  pressed: controlledPressed,
  defaultPressed = false,
  onPressedChange,
  children,
}: ToggleProps) {
  const [internalPressed, setInternalPressed] = useState(defaultPressed);
  const isControlled = controlledPressed !== undefined;
  const pressed = isControlled ? controlledPressed : internalPressed;
 
  const handleClick = useCallback(() => {
    const next = !pressed;
    if (!isControlled) {
      setInternalPressed(next);
    }
    onPressedChange?.(next);
  }, [pressed, isControlled, onPressedChange]);
 
  return (
    <button
      type="button"
      role="switch"
      aria-checked={pressed}
      onClick={handleClick}
      className={`px-4 py-2 rounded-full transition-colors ${
        pressed
          ? "bg-blue-600 text-white"
          : "bg-gray-200 text-gray-700"
      }`}
    >
      {children}
    </button>
  );
}
 
// --- Ejemplos de uso ---
 
// No controlado — el componente gestiona su propio estado
function SimpleToggle() {
  return (
    <Toggle
      defaultPressed={false}
      onPressedChange={(p) => console.log("Alternado:", p)}
    >
      Modo Oscuro
    </Toggle>
  );
}
 
// Controlado — el padre es propietario y puede sobreescribir el estado
function SyncedToggles() {
  const [enabled, setEnabled] = useState(false);
 
  return (
    <div className="flex gap-4">
      <Toggle pressed={enabled} onPressedChange={setEnabled}>
        Alternar A
      </Toggle>
      <Toggle pressed={enabled} onPressedChange={setEnabled}>
        Alternar B
      </Toggle>
      <p>Ambos están: {enabled ? "ENCENDIDOS" : "APAGADOS"}</p>
    </div>
  );
}

function useControllableState<T>({
  value: controlledValue,
  defaultValue,
  onChange,
}: {
  value?: T;
  defaultValue: T;
  onChange?: (value: T) => void;
}): [T, (next: T) => void] {
  const [internalValue, setInternalValue] = useState(defaultValue);
  const isControlled = controlledValue !== undefined;
  const value = isControlled ? controlledValue : internalValue;
 
  const setValue = useCallback(
    (next: T) => {
      if (!isControlled) setInternalValue(next);
      onChange?.(next);
    },
    [isControlled, onChange]
  );
 
  return [value, setValue];
}
 
// Uso dentro de cualquier componente
function Slider({ value, defaultValue = 0, onChange, min = 0, max = 100 }: SliderProps) {
  const [current, setCurrent] = useControllableState({
    value,
    defaultValue,
    onChange,
  });
  // ... renderiza con `current` y `setCurrent`
}

function ContactForm() {
  async function submitAction(formData: FormData) {
    "use server";
    const email = formData.get("email") as string;
    await sendEmail(email);
  }
 
  return (
    <form action={submitAction}>
      <input name="email" type="email" defaultValue="" />
      <button type="submit">Enviar</button>
    </form>
  );
}