UseRef est un hook de React qui permet de créer une référence mutable. Cette référence peut être utilisée pour accéder directement à un élément du DOM ou pour conserver une valeur mutable qui ne déclenche pas de re-rendu lorsque celle-ci change.

Utilisation de base

Voici un exemple simple pour illustrer l’utilisation de useRef :

import React, { useRef } from 'react';

function MonComposant() {
  const monRef = useRef(null);

  const focusInput = () => {
    monRef.current.focus();
  };

  return (
    <div>
      <input ref={monRef} type="text" />
      <button onClick={focusInput}>Focus sur l'input</button>
    </div>
  );
}

Dans cet exemple :

1. Création de la référence : const monRef = useRef(null); crée une référence initialisée à null.
2. Attachement à un élément : L’attribut ref={monRef} sur l’élément <input> associe cette référence à l’élément DOM correspondant.
3. Utilisation de la référence : monRef.current donne accès à l’élément DOM. Ici, monRef.current.focus() met le focus sur l’input lorsque le bouton est cliqué.

Autres utilisations de useRef

useRef peut également être utilisé pour stocker des valeurs mutables qui ne nécessitent pas de re-rendu lorsqu’elles changent. Par exemple :

import React, { useRef, useEffect } from 'react';

function MonComposant() {
  const compteurRef = useRef(0);

  useEffect(() => {
    compteurRef.current = compteurRef.current + 1;
    console.log(`Le composant a été rendu ${compteurRef.current} fois`);
  });

  return <div>Compteur de rendus : {compteurRef.current}</div>;
}

Dans cet exemple :

• compteurRef est utilisé pour stocker un compteur qui s’incrémente à chaque rendu du composant.
• Comme useRef ne déclenche pas de re-rendu lorsque sa valeur change, le composant ne se re-rend pas lorsque compteurRef.current est mis à jour.

Points clés

• Accès au DOM : useRef est souvent utilisé pour accéder directement à des éléments du DOM.
• Valeurs mutables : Il peut également être utilisé pour stocker des valeurs qui doivent persister entre les rendus sans déclencher de re-rendu.
• Pas de re-rendu : Contrairement à useState, la modification de useRef.current ne provoque pas de re-rendu du composant.

Attention

• Ne pas abuser : L’accès direct au DOM doit être utilisé avec parcimonie, car cela peut aller à l’encontre des principes de React qui privilégie une approche déclarative.
• Initialisation : La valeur initiale de useRef est définie une seule fois, lors du premier rendu du composant.