ref como prop en React 19: adiós forwardRef 👋🏻

En React 19, ref ya no necesita forwardRef. Puedes pasarlo como cualquier otra prop directamente al componente hijo.

El problema antes de React 19

Para pasar una ref a un componente hijo necesitabas envolver el componente con forwardRef:

// ❌ React 18: necesitabas forwardRef
import { forwardRef } from 'react';

const Input = forwardRef(function Input({ placeholder }, ref) {
  return <input ref={ref} placeholder={placeholder} />;
});

// En el padre:
const inputRef = useRef(null);
<Input ref={inputRef} placeholder="Escribe aquí" />

Era funcional pero verboso, especialmente en componentes de UI que pasan refs constantemente.

La solución en React 19

ref ahora es una prop más. Sin forwardRef, sin wrapper:

// ✅ React 19: ref como prop normal
function Input({ placeholder, ref }) {
  return <input ref={ref} placeholder={placeholder} />;
}

// En el padre, exactamente igual:
const inputRef = useRef(null);
<Input ref={inputRef} placeholder="Escribe aquí" />

Mismo comportamiento, menos código.

Con TypeScript

import { useRef, Ref } from 'react';

interface InputProps {
  placeholder: string;
  ref?: Ref<HTMLInputElement>;
}

function Input({ placeholder, ref }: InputProps) {
  return <input ref={ref} placeholder={placeholder} />;
}

Migración

forwardRef sigue funcionando en React 19 pero está deprecado. El equipo de React planea eliminarlo en versiones futuras.

Si tienes un codebase grande, puedes migrar gradualmente: los componentes nuevos sin forwardRef, los existentes cuando los toques.

---

Un cambio pequeño que elimina un patrón confuso para quienes aprenden React. ref ahora se comporta como cualquier otra prop, sin magia adicional.