À quoi servent forwardRef et useImperativeHandle ?

Question

Accepted Answer

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. ## Transmettre une ref à un nœud DOM ```jsx const TextInput = forwardRef(function TextInput(props, ref) { return ; // parent's ref now points to the }); // parent can focus the inner input: const ref = useRef(null); ; // ref.current.focus(); ``` ## Exposer une API personnalisée au lieu du nœud brut Parfois, vous ne voulez pas exposer le nœud DOM entier — seulement des méthodes spécifiques : ```jsx const FancyInput = forwardRef(function FancyInput(props, ref) { const inner = useRef(null); useImperativeHandle(ref, () => ({ focus: () => inner.current.focus(), clear: () => { inner.current.value = ""; }, }), []); return ; }); // parent: fancyRef.current.focus(); fancyRef.current.clear(); ``` ## Pourquoi c'est important 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.