Ref – Référence

Une ref (référence) est un objet JavaScript fourni par React qui permet d’accéder directement à un élément du DOM ou de conserver une valeur mutable sans provoquer de re-rendu du composant.

C’est une échappatoire au flux de données normal de React.

Les 2 Cas d’Usage Principaux

L’Analogie

useRef = Un post-it caché dans ta poche. Tu peux changer ce qui est écrit, personne ne le voit (l’écran ne bouge pas), mais toi tu t’en souviens.

useState = Un tableau blanc dans la pièce. Quand tu changes ce qui est écrit, tout le monde le voit (l’écran se met à jour).

Exemple 1 : Toucher un élément HTML (Le plus courant)

Je veux cliquer sur un bouton pour mettre le focus dans un input.

function MonFormulaire() {
  // 1. Je crée la "télécommande"
  const inputRef = useRef(null);

  const focuser = () => {
    // 2. J'utilise la télécommande pour toucher l'input
    inputRef.current.focus(); 
  };

  return (
    <>
      {/* 3. Je donne la télécommande à l'input */}
      <input ref={inputRef} placeholder="Je suis ici" />
      <button onClick={focuser}>Cliquer pour écrire</button>
    </>
  );
}

Exemple 2 : Se souvenir sans recharger l’écran

Je veux compter les clics, mais sans que le chiffre s’affiche à chaque fois.

function CompteurSecret() {
  const [affiche, setAffiche] = useState(0); // Celui-ci affiche à l'écran
  const refCompteur = useRef(0);             // Celui-ci reste caché

  const cliquer = () => {
    refCompteur.current = refCompteur.current + 1; // Pas de re-rendu
    setAffiche(affiche + 1);                       // Déclenche un re-rendu
    
    console.log("Clics totaux (cachés):", refCompteur.current);
  };

  return <button onClick={cliquer}>Clics affichés : {affiche}</button>;
}