valor de usar React.forwardRef vs accesorio de referencia personalizado

Veo que React.forwardRef parece ser la forma autorizada de pasar una referencia a un componente funcional secundario, desde los documentos de reacción:

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Sin embargo, ¿cuál es la ventaja de hacer esto sobre simplemente pasar un accesorio personalizado ?:

const FancyButton = ({ innerRef }) => (
  <button ref={innerRef} className="FancyButton">
    {props.children}
  </button>
));

const ref = React.createRef();
<FancyButton innerRef={ref}>Click me!</FancyButton>;

La única ventaja que se me ocurre es que quizás tenga una API constante para los árbitros, pero ¿hay alguna otra ventaja? ¿Pasar un accesorio personalizado afecta la diferencia cuando se trata de renderizar y causa renders adicionales, seguramente no porque la referencia se almacena como estado mutable en el currentcampo?

Digamos, por ejemplo, que desea pasar varias referencias (que tbh, podría indicar olor a código, pero aún así), entonces la única solución que puedo ver sería usar accesorios customRef.

Supongo que mi pregunta es ¿cuál es el valor de usar forwardRefsobre un accesorio personalizado?

Incluso los documentos de React mencionan el accesorio de referencia personalizado como un enfoque más flexible paraforwardRef :

Si usa React 16.2 o inferior, o si necesita más flexibilidad que la proporcionada por el reenvío de referencias , puede usar este enfoque alternativo y pasar explícitamente una referencia como un accesorio con un nombre diferente .

También hay una esencia , en la que Dan Abramov escribe sobre sus ventajas:

• compatible con todas las versiones React
• funciona para componentes de clase y función
• simplifica pasar una referencia a un componente anidado varias capas de profundidad

Agregaría que pasar referencias como accesorios habituales no causa cambios importantes y es el camino a seguir para múltiples referencias. Las únicas ventajas de forwardRefvenir a mi mente son:

• API de acceso uniforme para nodos DOM, componentes funcionales y de clase (usted mencionó eso)
• ref El atributo no hincha la API de accesorios, por ejemplo, si proporciona tipos con TypeScript

¿Pasar un accesorio personalizado afecta la diferencia cuando se trata de renderizar y causa renders adicionales?

Una referencia puede potencialmente desencadenar una nueva representación si pasa una función de referencia de devolución de llamada en línea como accesorio. Pero de todos modos es una mejor idea definirlo como un método de instancia de clase o mediante alguna memorización como useCallback.

RefEs una propiedad estándar en Reactcomponentes.

Algunos componentes que envuelven otros componentes para proporcionar funcionalidad adicional, se usan refpara referirse al componente envuelto y esperan que el componente tengaref propiedad.

Es mejor que un componente tenga el ref propiedad de ser compatible con otros componentes y bibliotecas.

Los componentes de la función no pueden tener la propiedad "ref" y deben usar forwardRef en lugar para proporcionar la refpropiedad.