Victor Thérache

Bonjour tout le monde,

Le hook useRef() est un moyen de sélectionner des éléments avec React. Vous pouvez utiliser la méthode habituelle document.querySelector, mais elle n’est pas optimisée car elle va parcourir tout le DOM. Alors que si vous utilisez ce hook, il ne regardera que dans votre composant !

Si vous préférez regarder la version vidéo, c’est ici :

1. Prenons un exemple.

Imaginons que vous ayez un formulaire :

Afin d’utiliser le hook useRef(), importons-le :

Maintenant, créons des références, en leur donnant un nom :

Maintenant, vous pouvez simplement sélectionner un élément que vous voulez ajouter à l’intérieur de cette référence avec l’attribut ref. Par exemple, ajoutons-le à la première entrée :

Si vous l’enregistrez, il montrera simplement un objet dont la propriété current est indéfinie. Cependant, ce que nous voulons, c’est la valeur de la propriété current.

Comme le composant est exécuté en premier, nous devons utiliser le hook useEffect() pour voir la valeur de notre ref.
C’est parce que la fonction de callback useEffect est déclenchée après la création du composant.

Vous devez alimenter le hook useEffect() avec une fonction flèche et un tableau vide, c’est-à-dire le tableau de dépendance, ce qui signifie que useEffect ne sera déclenché qu’une seule fois, après la création de ce composant.

2. Maintenant créons un « ref » pour la deuxième entrée.

Habituellement, nous utilisons Ref avec une méthode onSubmit :

Vous pouvez ajouter une fonction console.log() si vous souhaitez utiliser ce qui se trouve dans vos entrées, par exemple pour un appel d’API.

Maintenant, chaque fois que vous écrivez dans les entrées et soumettez le formulaire, les valeurs s’affichent dans la console.

3. Le multiréf.

Comment sélectionner plusieurs références si vous en avez trop ?

Commencez une référence avec un tableau vide :

Ensuite, créez une méthode qui vérifiera si l’élément n’est pas indéfini et s’il n’est pas déjà dans le tableau, alors vous le pousserez dans le tableau :

Ajoutez cette méthode à chacune de vos entrées :

Bravo ! Vous savez maintenant comment utiliser le hook *useRef()* pour sélectionner vos éléments !

Article traduit avec deepl.io, source : https://dev.to/ziratsu/the-useref-hook-in-react-3h98
  
Lien de sa chaîne youtube : https://www.youtube.com/c/Learntocreate/videos