React - Bibliothèque Javascript pour le frontend
Page 9: Le hook useRef pour référencer les éléments du DOM
Toutes les pages 
React - Bibliothèque Javascript pour le frontend
Page 9
Le hook useRef pour référencer les éléments du DOM
Le hook useRef pour référencer les éléments du DOM
Le hook useRef
Référencer les éléments du DOM avec useRef
Le hook useRef est parmi les hooks les plus populaires en React. Il est fréquemment utilisé au sein des projets React surtout pour mémoriser les valeurs entre les rendus (rerendering) des composants.L'une des applications les plus courantes du hook useRef consiste à faire référence aux éléments du DOM, en l'occurrence, les champs de formulaires comme les zones de texte. En effet, pour manipuler les zones de texte, il existe une technique qui se base sur les states et qui consiste à stocker la valeurs courante de la zone de texte dans un state que l'on met à jour à l'aide du setter après chaque saisie. Cependant, cette technique est un peu fastidieuse.
La solution consiste à utiliser le hook useRef comme ceci:
import { useRef } from "react";
function App() {
const myRef=useRef(null)
const handleClick=()=>{
console.log(myRef.current.value)
}
return (
<>
<input type="text" ref={myRef} />
<button onClick={handleClick}>
Afficher
</button>
</>
);
}
export default App;
Il faut commencer par importer le module useRef du module principal react. Tout comme le useState ainsi que les autres modules, le fait d'invoquer useRef dans le code mène votre IDE à l'importer automatiquement.
function App() {
const myRef=useRef(null)
const handleClick=()=>{
console.log(myRef.current.value)
}
return (
<>
<input type="text" ref={myRef} />
<button onClick={handleClick}>
Afficher
</button>
</>
);
}
export default App;
On Définit on objet nommé myRef à l'aide du hook useRef en passant à celui-ci la valeur null. Il s'agit d'une option, sinon vous gardez les parenthèses vides et ça revient en même.
Maintenant, on associe un élément du DOM à l'objet que l'on vient de créer. Il s'agit dans notre cas de la zone de texte à laquelle on applique l'attribut ref avec la valeur myRef qui est l'objet qu'on a créé avec le hook useRef. Désormais, notre zone de texte a été référencée et sa valeur peut persister entre les rendus (rerendering).
Plus haut, j'ai utilisé le terme attribut pour désigner ref. En réalité, il ne s'agit pas d'un attribut HTML, car ce qui ressemble au HTML dans notre code est en fait du JSX. Donc, certains développeurs utilisent plutôt les termes prop ou simplement Ref JSX.
L'objet myRef dispose de l'attribut current qui permet de désigner l'élément dans le DOM (un peu comme document.getElementById ou autre technique d'accès au DOM vus en Javascript).
Figurez-vous que toutes ces opérations s'effectuent dans le Virtual DOM en premier, avant de les appliquer du DOM réel via le processus de réconciliation.
Maintenir une valeur entre les rendus du composant
Bien que useRef est principalement utilisé pour référencer les éléments du DOM (comme vu précédemment), il est toutefois possible de s'en servir pour maintenir une valeur entre les rendus d'un composant.Voilà un exemple de code simple qui implémente cette fonctionnalité:
function App() {
const myRef=useRef(0)
const handleClick=()=>{
myRef.current+=1
console.log(myRef.current)
}
return (
<>
<button onClick={handleClick}>
Incrémenter
</button>
</>
);
}
export default App;
Dans cet exemple, nous avons initialisé l'objet myRef à 0 (à accessible via l'attribut current). Après chaque clic sur le bouton, on incrémente cette valeur de 1 et on l'affiche à la console sans déclencher un rerendering.
const myRef=useRef(0)
const handleClick=()=>{
myRef.current+=1
console.log(myRef.current)
}
return (
<>
<button onClick={handleClick}>
Incrémenter
</button>
</>
);
}
export default App;
À première vue, ça peut paraitre inutiles, mais il est parfois capital d'avoir accès à des valeurs mutables qui ne sont pas forcément visible dans l'interface graphique, mais peuvent assurer des traitements secondaires comme les temporisateurs.
Page 9
Le hook useRef pour référencer les éléments du DOM
Le hook useRef pour référencer les éléments du DOM
