Une ref passée à un composant personnalisé n'atteint pas automatiquement un nœud DOM à l'intérieur. forwardRef permet à un composant de recevoir une ref et de l'attacher à un élément enfant. useImperativeHandle personnalise ce que cette ref expose.
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();
Parfois, vous ne voulez pas exposer le nœud DOM entier — seulement des méthodes spécifiques :
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();
Préférez les props/state pour la communication. N'utilisez les refs que pour des besoins véritablement impératifs : gestion du focus, défilement, sélection de texte, lecture multimédia ou intégration de bibliothèques impératives. Remarque : dans React 19, ref peut être passée comme une prop normale, donc forwardRef n'est souvent plus nécessaire.
Une bibliothèque de questions d'entretien IT avec des réponses détaillées — du Junior au Senior.
Faire un don