forwardRef: exposición de referencias DOM a componentes padre

Un ref es una forma de conservar una referencia a un nodo DOM o a una instancia de componente que persiste entre renderizados sin provocar nuevos renderizados. Se adjunta mediante el atributo ref, y React establece su propiedad current después de confirmar los cambios en el DOM.

La limitación es que no puede adjuntar un ref a un componente de función como lo haría a un div. De forma predeterminada, un componente padre no tiene forma de acceder al nodo DOM que se encuentra dentro de un componente hijo, porque los refs no se pasan como props normales.

React.forwardRef permite que un componente reciba un ref de su padre y lo reenvíe a uno de sus propios elementos. Envuelve la función del componente y cambia la firma de la función para que ref llegue como segundo argumento, junto con props.

Este es el mecanismo de escape oficial para exponer un nodo DOM interno a un componente que lo utiliza, transformando un componente hijo que normalmente sería opaco en uno cuyo elemento puede referenciar directamente el padre.

La función envuelta recibe dos parámetros: (props, ref). El primero es el objeto props habitual y el segundo es el ref reenviado. A continuación, puede propagar ese ref o adjuntarlo al elemento que quiera exponer, como ref={ref} en un input interno.

Recuerde que solo los componentes envueltos con forwardRef reciben este segundo argumento. Un componente de función normal que incluya ref como segundo parámetro simplemente recibirá undefined.

El ejemplo clásico es un componente de campo de texto reutilizable cuyo input interno desea que el padre pueda enfocar. Al envolver el campo con forwardRef y adjuntar el ref reenviado al elemento input subyacente, el padre puede llamar directamente a focus.

Esto mantiene reutilizable el componente de campo y, al mismo tiempo, proporciona acceso imperativo controlado exactamente donde se necesita, como al enfocar el primer campo de un formulario al montarlo.

Los refs reenviados también permiten realizar mediciones. Un padre puede leer offsetWidth y offsetHeight, o llamar a getBoundingClientRect, en un elemento hijo que haya recibido mediante forwardRef.

Esto resulta útil para tooltips, popovers y cálculos de diseño en los que el padre debe conocer el tamaño o la posición exactos de un elemento interno ya renderizado antes de decidir dónde colocar algo en relación con él.

Como el ref reenviado apunta a un nodo DOM real, el padre puede invocar métodos nativos del DOM en él. Llamar a scrollIntoView en un elemento de lista reenviado lo muestra suavemente en pantalla, y scrollTo en un contenedor de desplazamiento reenviado reposiciona su contenido.

Estas son acciones imperativas que no tienen un equivalente declarativo claro, precisamente el tipo de interacción que los refs están diseñados para gestionar.

A veces, el elemento que desea exponer se encuentra varios componentes por debajo. Puede encadenar forwardRef para que cada capa intermedia reenvíe el ref que recibe a la siguiente, hasta que finalmente llegue al nodo DOM de destino.

Cada envoltorio de la cadena debe utilizar forwardRef y pasar el ref, ya que un componente normal en medio rompería la conexión.

forwardRef y React.memo se pueden combinar para obtener tanto el reenvío de refs como la memorización de renderizados. El orden habitual es memo(forwardRef(Component)), de modo que se envuelve el resultado de forwardRef y la comparación de memo sigue aplicándose.

Este patrón aparece en sistemas de diseño sensibles al rendimiento, donde un componente que se renderiza con frecuencia debe exponer su nodo y evitar renderizados innecesarios.

En React DevTools, un componente forwardRef aparece con la etiqueta ForwardRef envolviendo el nombre del componente. Esto permite confirmar de un vistazo que un componente participa en el reenvío de refs.

Puede asignar un nombre a la función interna o establecer un displayName para que la entrada de DevTools sea más clara que una etiqueta ForwardRef anónima y genérica.

forwardRef sirve para exponer nodos DOM y controles imperativos, no para pasar datos. Si un padre necesita influir en un hijo, es preferible utilizar props y state normales en lugar de acceder a él mediante un ref.

El uso excesivo de refs acopla estrechamente los componentes y evita el flujo de datos de React, lo que dificulta seguir el comportamiento. Recurra a forwardRef solo cuando una prop declarativa no pueda expresar realmente la interacción.

forwardRef sigue siendo la herramienta estándar para exponer refs en bibliotecas de componentes e inputs reutilizables. Las versiones más recientes de React avanzan hacia la posibilidad de pasar ref como una prop normal, pero forwardRef todavía se utiliza ampliamente y es importante comprenderlo.

Conocerlo bien le prepara tanto para trabajar con bases de código existentes como para entender la mecánica subyacente en la que se basa cualquier sintaxis futura de ref-as-prop.

Compruebe si entiende cómo recibe su ref un componente forwardRef.

forwardRef resuelve la limitación que impide a un padre acceder al nodo DOM de un componente hijo, proporcionando al componente un segundo argumento ref que puede reenviar a un elemento interno. Esto permite enfocar, medir y desplazar elementos hijos.

Se combina con memo, se puede encadenar a través de varias capas y aparece como ForwardRef en DevTools. Úselo para acceder imperativamente al DOM, no para pasar datos, una tarea para la que props resulta más adecuada.