forwardRef: esporre i riferimenti DOM ai componenti padre

Un ref è un modo per conservare un riferimento a un nodo DOM o a un'istanza di componente che persiste tra i render senza causare nuovi render. Si associa tramite l'attributo ref e React ne valorizza la proprietà current dopo aver eseguito il commit nel DOM.

Il problema è che non è possibile associare un ref a un componente funzione come si farebbe con un div. Per impostazione predefinita, un componente padre non ha modo di raggiungere il nodo DOM che si trova all'interno di un componente figlio, perché i ref non vengono trasmessi come le normali props.

React.forwardRef consente a un componente di ricevere un ref dal padre e inoltrarlo a uno dei propri elementi. Avvolge la funzione del componente e ne modifica la firma, così che ref arrivi come secondo argomento insieme a props.

Questo è il meccanismo ufficiale per esporre un nodo DOM interno al componente chiamante, trasformando un figlio altrimenti opaco in un componente il cui elemento può essere referenziato direttamente dal padre.

La funzione avvolta accetta due parametri: (props, ref). Il primo è il consueto oggetto props, mentre il secondo è il ref inoltrato. È quindi possibile espandere o associare quel ref all'elemento che si desidera esporre, ad esempio ref={ref} su un input interno.

Ricordi che solo i componenti avvolti con forwardRef ricevono questo secondo argomento. Un normale componente funzione che dichiara ref come secondo parametro riceverà semplicemente undefined.

L'esempio classico è un componente riutilizzabile per campi di testo, il cui input interno deve poter essere messo a fuoco dal padre. Avvolgendo il campo in forwardRef e associando il ref inoltrato all'elemento input sottostante, il padre può chiamare direttamente focus su di esso.

In questo modo il componente del campo rimane riutilizzabile, offrendo al contempo un accesso imperativo controllato esattamente dove serve, ad esempio per mettere a fuoco il primo campo di un modulo al suo montaggio.

I ref inoltrati consentono anche di effettuare misurazioni. Un componente padre può leggere offsetWidth e offsetHeight oppure chiamare getBoundingClientRect su un elemento figlio ricevuto tramite forwardRef.

È utile per tooltip, popover e calcoli di layout in cui il padre deve conoscere le dimensioni o la posizione effettive di un elemento interno dopo il rendering, prima di decidere dove posizionare qualcosa rispetto a esso.

Poiché il ref inoltrato punta a un vero nodo DOM, il padre può invocarne i metodi DOM nativi. Chiamando scrollIntoView su un elemento di elenco inoltrato, questo viene portato gradualmente nell'area visibile; scrollTo su un contenitore scorrevole inoltrato ne riposiziona il contenuto.

Si tratta di azioni imperative che non hanno un equivalente dichiarativo efficace: è esattamente il tipo di interazione che i ref sono destinati a gestire.

A volte l'elemento che si desidera esporre è sepolto a diversi livelli di profondità tra i componenti. È possibile concatenare forwardRef, in modo che ogni livello intermedio inoltri il ref ricevuto a quello successivo, finché questo raggiunge il nodo DOM di destinazione.

Ogni wrapper della catena deve utilizzare a sua volta forwardRef e trasmettere il ref, poiché un componente ordinario nel mezzo interromperebbe il collegamento.

È possibile combinare forwardRef e React.memo per ottenere sia l'inoltro dei ref sia la memoizzazione del rendering. L'ordine consueto è memo(forwardRef(Component)): in questo modo si avvolge il risultato di forwardRef e il confronto di memo continua ad applicarsi.

Questo schema è comune nei design system sensibili alle prestazioni, dove un componente sottoposto a rendering frequenti deve sia esporre il proprio nodo sia evitare render non necessari.

In React DevTools, un componente forwardRef viene visualizzato con l'etichetta ForwardRef che avvolge il nome del componente. In questo modo è facile verificare a colpo d'occhio che un componente partecipi all'inoltro dei ref.

È possibile assegnare un nome alla funzione interna oppure impostare un displayName, così che la voce in DevTools sia più chiara rispetto a una generica etichetta ForwardRef anonima.

forwardRef serve a esporre nodi DOM e handle imperativi, non a trasmettere dati. Se il padre deve influenzare il figlio, preferisca props e stato ordinari invece di intervenire tramite un ref.

Usare i ref in modo eccessivo crea un forte accoppiamento tra i componenti e aggira il flusso dei dati di React, rendendo più difficile seguire il comportamento. Ricorra a forwardRef solo quando una prop dichiarativa non è realmente in grado di esprimere l'interazione.

forwardRef rimane lo strumento standard per esporre ref nelle librerie di componenti e negli input riutilizzabili. Le versioni più recenti di React si stanno orientando verso la possibilità di passare ref come una prop normale, ma forwardRef è ancora ampiamente utilizzato ed è importante comprenderlo.

Conoscerlo bene prepara a lavorare sia con basi di codice esistenti sia con i meccanismi sottostanti su cui si basa qualsiasi futura sintassi ref-as-prop.

Verifichi la Sua comprensione del modo in cui un componente forwardRef riceve il proprio ref.

forwardRef risolve il limite per cui un componente padre non può raggiungere il nodo DOM di un componente figlio, fornendo al componente un secondo argomento ref che può inoltrare a un elemento interno. Questo consente di mettere a fuoco, misurare e far scorrere gli elementi figli.

Si compone con memo, può essere concatenato attraverso più livelli e viene visualizzato come ForwardRef in DevTools. Lo utilizzi per l'accesso imperativo al DOM, non per trasmettere dati: per questo le props sono più adatte.