Le hook useRef permet de créer une variable qui contient une référence à un élément, une valeur ou toute autre donnée qui n'affecte pas le rendu du composant. Ceci est utile pour stocker des valeurs mutables, accéder à des éléments du DOM ou préserver des valeurs entre les rendus du composant.

Syntaxe :

Pour utiliser le hook useRef, il faut déclarer une variable (refVariable) et lui assigner le résultat de l'appel à useRef(). Il est possible de fournir une valeur initiale (initialValue) en argument de ce hook.

const refVariable = useRef(initialValue);

Remarque

La valeur actuelle peut être consultée et modifiée via la propriété refVariable.current. L'avantage de useRef est qu'il permet de manipuler ces valeurs sans déclencher un nouveau rendu du composant.

Exemple :

Créons le composant FormInput qui utilise le hook useRef pour créer une référence vers un élément input et lui donner le focus lorsqu'un bouton est cliqué.

import React, { useRef } from "react";

const FormInput = () => {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

Dans cet exemple, le hook useRef crée une référence appelée inputRef. Cette référence est assignée à l'attribut ref de l'élément input, ce qui permet d'accéder à l'élément input via inputRef.current.

Explication ligne par ligne :

• Ligne 1 : Importation du hook useRef depuis la bibliothèque React pour exploiter sa fonctionnalité ;
• Ligne 3 : Définition du composant FormInput en utilisant la syntaxe fonctionnelle conventionnelle ;
• Ligne 4 : Initialisation de la variable inputRef à l'aide du hook useRef, représentant la référence de l'input ;
• Lignes 6-8 : Cette fonction fléchée JavaScript gère la logique lors du clic sur le bouton, ce qui place le curseur de l'utilisateur dans le champ de saisie ;
• Lignes 10-15 : Rendu du balisage du composant.

1. À la ligne 12, la référence est définie via l'attribut ref et la variable inputRef lui est assignée ;
2. Le bouton à la ligne 13 utilise l'attribut onClick pour spécifier la fonction à exécuter lors du clic, qui est ici la fonction handleClick.

Code complet de l'application :