Un ref passato a un componente personalizzato non raggiunge automaticamente un nodo DOM al suo interno. forwardRef consente a un componente di ricevere un ref e allegarlo a un elemento child. useImperativeHandle personalizza cosa quel ref espone.
const TextInput = forwardRef(function TextInput(props, ref) {
return <input ref={ref} {...props} />; // parent's ref now points to the <input>
});
// parent can focus the inner input:
const ref = useRef(null);
<TextInput ref={ref} />;
// ref.current.focus();
A volte non vuoi esporre l'intero nodo DOM — solo metodi specifici:
const FancyInput = forwardRef(function FancyInput(props, ref) {
const inner = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => inner.current.focus(),
clear: () => { inner.current.value = ""; },
}), []);
return <input ref={inner} {...props} />;
});
// parent: fancyRef.current.focus(); fancyRef.current.clear();
Preferisci props/state per la comunicazione. Ricorri ai ref solo per esigenze veramente imperative: gestione del focus, scrolling, selezione del testo, riproduzione multimediale o integrazione di librerie imperative. Nota: in React 19, ref può essere passato come prop normale, quindi forwardRef spesso non è più necessario.
Una raccolta di domande di colloquio IT con risposte dettagliate — da Junior a Senior.
Dona