valor de usar React.forwardRef vs prop ref personalizado

Vejo que React.forwardRef parece ser a maneira sancionada de passar um ref para um componente funcional filho, a partir dos documentos de reação:

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>;

No entanto, qual é a vantagem de fazer isso ao simplesmente passar um suporte personalizado ?:

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

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

A única vantagem em que consigo pensar é talvez ter uma API consistente para refs, mas existe alguma outra vantagem? A aprovação de uma proposta personalizada afeta a diferença quando se trata de renderização e causa renderizações adicionais, certamente não, pois o ref é armazenado como estado mutável no currentcampo?

Digamos, por exemplo, que você desejasse passar várias referências (o que tbh pode indicar cheiro de código, mas ainda assim), a única solução que posso ver seria usar adereços customRef.

Acho que minha pergunta é qual é o valor de usar forwardRefsobre um suporte personalizado?

Até os documentos do React mencionam o prop ref personalizado como uma abordagem mais flexível para forwardRef:

Se você usar o React 16.2 ou inferior, ou se precisar de mais flexibilidade do que a fornecida pelo encaminhamento de referência , poderá usar essa abordagem alternativa e passar explicitamente uma referência como um objeto de nome diferente .

Há também uma essência , na qual Dan Abramov escreve sobre suas vantagens:

• compatível com todas as versões do React
• funciona para componentes de classe e função
• simplifica a passagem de uma ref para um componente aninhado com várias camadas de profundidade

Eu acrescentaria que a aprovação de árbitros como adereços de sempre não causa mudanças de quebra e é o caminho a seguir para vários árbitros. As únicas vantagens de forwardRefvir à minha mente são:

• API de acesso uniforme para nós DOM, componentes funcionais e de classe (você mencionou isso)
• ref O atributo não incha a sua API de adereços, por exemplo, se você fornecer tipos com TypeScript

A aprovação de um suporte personalizado afeta as diferenças quando se trata de renderização e causa renderizações adicionais?

Uma ref pode potencialmente desencadear uma nova renderização se você passar uma função de ref de retorno de chamada em linha para baixo como prop. Mas é uma idéia melhor de qualquer maneira defini-lo como método de instância de classe ou através de alguma memorização como useCallback.

Refé uma propriedade padrão em Reactcomponentes.

Alguns componentes que envolvem outros componentes para fornecer funcionalidade adicional, usam refpara se referir ao componente agrupado e esperam que o componente tenha refpropriedade.

É melhor que um componente tenha a refpropriedade para ser compatível com outros componentes e bibliotecas.

Os componentes de função não podem ter a propriedade "ref" e devem ser usados forwardRefpara fornecer refpropriedade.