Le hook useRef nous 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. Cela peut être utile pour stocker des valeurs mutables, accéder à des éléments du DOM ou préserver des valeurs à travers les rendus du composant.

Syntaxe :

Pour utiliser le hook useRef, nous déclarons une variable (refVariable), et lui assignons le résultat de l'invocation de useRef(). Optionnellement, nous pouvons fournir une valeur initiale (initialValue) en tant qu'argument de ce hook.

const refVariable = useRef(initialValue);

Remarque

La valeur actuelle peut être accédée et mise à jour en utilisant la propriété refVariable.current. La beauté de useRef est qu'il nous 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 à un élément input et le focalise 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, nous permettant d'accéder à l'élément input en utilisant inputRef.current.

Explication ligne par ligne :

• Ligne 1 : Nous importons le hook useRef de la bibliothèque React pour tirer parti de sa fonctionnalité ;
• Ligne 3 : Le composant FormInput est défini en utilisant la syntaxe de fonction conventionnelle ;
• Ligne 4 : Nous initialisons la variable inputRef en utilisant le hook useRef, représentant la référence de l'entrée ;
• Lignes 6-8 : Cette fonction fléchée JavaScript gère la logique pour cliquer sur le bouton, ce qui concentre le curseur de l'utilisateur sur le champ de saisie ;
• Lignes 10-15 : Le balisage du composant est rendu.
  1. À la ligne 12, nous définissons la référence en utilisant l'attribut ref et assignons la variable inputRef comme sa valeur ;
  2. Le bouton à la ligne 13 utilise l'attribut onClick pour spécifier la fonction à exécuter lorsqu'il est cliqué, qui dans ce cas est la fonction handleClick.

Code complet de l'application :