¿Sigue siendo necesario usar forwardRef en React o ya no?

Si alguna vez construiste un <Input /> personalizado o un botón mágico que debería enfocarse automáticamente… seguro te cruzaste con una palabrita un poco mágica: forwardRef.

Hoy te traigo una buena noticia: React 19 ha cambiado las reglas del juego. Vamos a ver qué significa esto, cuándo todavía puede ser útil y por qué todo apunta a que forwardRef tiene los días contados 🪦.

🔁 Recordando el pasado: ¿por qué existía forwardRef?

Antes de React 19, los ref no eran props comunes. Si creabas un componente así:

const Input = (props) => <input {...props} />

Y luego hacías esto:

const inputRef = useRef()
;<Input ref={inputRef} />

💥 ¡No funcionaba!

React no pasaba ese ref como parte de los props, y tu componente personalizado nunca se enteraba.

Entonces en código teníamos que hacer:

import { forwardRef } from 'react'
const Input = forwardRef((props, ref) => <input ref={ref} {...props} />)

Gracias a esto, el ref sí funcionaba y podías hacer cosas como:

useEffect(() => {
	inputRef.current?.focus()
}, [])

🎯 Casos reales donde forwardRef ha sido clave

• Inputs o textareas que necesitan auto-focus
• Formularios con validación que enfocan el primer error.
• Tooltips, popovers o menús que manejan foco de accesibilidad.
• Integración con librerías como react-hook-form.
• Scroll programático a un componente, por ejemplo ref.current.scrollIntoView().

🧪 React 19 cambia las reglas

Con la llegada de React 19 y su nuevo sistema de props, ahora los ref sí se pasan como un prop normal. ¿Qué significa esto?

Que ya puedes hacer:

const Input = ({ ref, ...props }) => <input ref={ref} {...props} />

Y eso funciona tal cual. Sin forwardRef, sin ceremonia, sin complicaciones. 🥳

🚨 Y sí… forwardRef se va a deprecar

Esto ya está confirmado por el equipo de React. El plan es ir dejando de lado forwardRef en futuras versiones, porque ya no tiene sentido técnico mantenerlo.

Así que si estás comenzando un nuevo proyecto en React 19, mejor ni lo uses.

Y si vas a migrar, considera refactorizar tus componentes para dejarlo atrás.

⏩ ¿Qué nos dice esto sobre el futuro de React?

React está en una clara misión de simplificar y modernizar su API. Si algo era confuso, indirecto o tenía que explicarse en más de 3 líneas, probablemente va a desaparecer o transformarse.

Ahora, React busca que escribir componentes se parezca más a escribir funciones puras. Y eso nos encanta

Cómo detectar si puedes eliminar forwardRef

• Si tu componente está en React 19 y usas ref directamente: puedes eliminarlo.
• Si estás usando alguna librería que espera forwardRef: ⚠️ revisa su compatibilidad.
• Si usas SSR con frameworks como Next.js, verifica cómo manejan ref con el nuevo modelo.

✅ Conclusiones

Versión de React	¿Necesito forwardRef?
React 18 o menor	✅ Sí
React 19	🚫 No (usar ref como prop)

¡Gracias por leer!