Ref como prop - Pasa refs como props regulares sin forwardRef

// React 19: ref es solo una prop
function TextInput({ placeholder, ref }: { placeholder: string; ref?: React.Ref<HTMLInputElement> }) {
  return <input placeholder={placeholder} ref={ref} />;
}
 
// Uso -- idéntico a antes
import { useRef } from "react";
 
function App() {
  const inputRef = useRef<HTMLInputElement>(null);
 
  return (
    <div>
      <TextInput ref={inputRef} placeholder="Escribe aquí..." />
      <button onClick={() => inputRef.current?.focus()}>Enfocar</button>
    </div>
  );
}

// Una librería de componentes input reutilizable con soporte de ref
"use client";
 
import { useRef, useImperativeHandle, type Ref, type ReactNode } from "react";
 
// Reenvío simple de ref -- sin necesidad del wrapper forwardRef
function Input({
  label,
  error,
  ref,
  ...inputProps
}: {
  label: string;
  error?: string;
  ref?: Ref<HTMLInputElement>;
} & React.InputHTMLAttributes<HTMLInputElement>) {
  return (
    <div className="flex flex-col gap-1">
      <label className="text-sm font-medium">{label}</label>
      <input
        ref={ref}
        className={`border rounded p-2 ${error ? "border-red-500" : "border-gray-300"}`}
        {...inputProps}
      />
      {error && <span className="text-red-500 text-sm">{error}</span>}
    </div>
  );
}
 
// Manejador imperativo con ref -- tampoco necesita forwardRef
type ComboboxHandle = {
  open: () => void;
  close: () => void;
  reset: () => void;
};
 
function Combobox({
  options,
  ref,
}: {
  options: string[];
  ref?: Ref<ComboboxHandle>;
}) {
  const inputRef = useRef<HTMLInputElement>(null);
  const [isOpen, setIsOpen] = useState(false);
  const [value, setValue] = useState("");
 
  useImperativeHandle(ref, () => ({
    open: () => setIsOpen(true),
    close: () => setIsOpen(false),
    reset: () => {
      setValue("");
      setIsOpen(false);
    },
  }));
 
  return (
    <div className="relative">
      <input
        ref={inputRef}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onFocus={() => setIsOpen(true)}
      />
      {isOpen && (
        <ul className="absolute top-full left-0 border bg-white w-full">
          {options
            .filter((o) => o.toLowerCase().includes(value.toLowerCase()))
            .map((option) => (
              <li
                key={option}
                onClick={() => {
                  setValue(option);
                  setIsOpen(false);
                }}
                className="p-2 hover:bg-gray-100 cursor-pointer"
              >
                {option}
              </li>
            ))}
        </ul>
      )}
    </div>
  );
}
 
// Componente padre usando ambos componentes
import { useState } from "react";
 
export default function RegistrationForm() {
  const nameRef = useRef<HTMLInputElement>(null);
  const comboRef = useRef<ComboboxHandle>(null);
 
  function handleReset() {
    nameRef.current?.focus();
    comboRef.current?.reset();
  }
 
  return (
    <form className="space-y-4">
      <Input ref={nameRef} label="Nombre completo" placeholder="Jane Doe" />
      <Combobox ref={comboRef} options={["Ingeniería", "Diseño", "Producto", "Marketing"]} />
      <button type="button" onClick={handleReset}>
        Reiniciar y enfocar nombre
      </button>
    </form>
  );
}

function MeasuredDiv({ ref }: { ref?: Ref<HTMLDivElement> }) {
  return (
    <div
      ref={(node) => {
        // Configuración
        if (node) {
          console.log("Montado:", node.getBoundingClientRect());
        }
        // Devuelve función de limpieza (nueva en React 19)
        return () => {
          console.log("Desmontado");
        };
      }}
    >
      Contenido medido
    </div>
  );
}

type ListProps<T> = {
  items: T[];
  renderItem: (item: T) => ReactNode;
  ref?: Ref<HTMLUListElement>;
};
 
function List<T>({ items, renderItem, ref }: ListProps<T>) {
  return (
    <ul ref={ref}>
      {items.map((item, i) => (
        <li key={i}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

// Antes (React 18)
const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
  return <input ref={ref} {...props} />;
});
 
// Después (React 19)
function Input({ ref, ...props }: InputProps & { ref?: Ref<HTMLInputElement> }) {
  return <input ref={ref} {...props} />;
}