Introduction

A quoi ça sertRéf

useRef est un hook React qui permet de créer une référence persistante à une valeur ou un élément DOM. Contrairement à useState, qui est utilisé pour gérer l'état qui déclenche les rendus, useRef est principalement utilisé pour les effets secondaires ou pour accéder directement aux éléments DOM.

Pourquoi utiliser useRef

Le hook useRef est particulièrement utile pour :

• Accéder directement aux éléments DOM : vous pouvez utiliser useRef pour obtenir une référence à un élément DOM, vous permettant de le manipuler directement sans déclencher un nouveau rendu.
• Créer des valeurs persistantes : contrairement à l'état, les valeurs créées avec useRef persistent entre les rendus, ce qui les rend idéales pour stocker des données qui n'ont pas besoin de déclencher de nouveaux rendus.

Comprendre le crochet useRef

Le hook useRef renvoie un objet avec la propriété .current. lorsque vous appelez useRef, cela crée une référence persistante à la valeur que vous transmettez en argument. Cette référence est stockée dans la propriété .current de l'objet renvoyé.

Créer une référence avec useRef

Pour créer une référence, appelez simplement useRef avec la valeur initiale.

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  return (...)
}

export default App

Dans l'exemple ci-dessus, countRef est une référence à la valeur initiale 0.

Accéder à la valeur de référence

Pour accéder à la valeur de référence, appelez simplement l'objet countRef avec la propriété .current

import { useRef} from 'react'

const App = () => {
  const countRef = useRef(0)

  const increment = () => {
    countRef.current  
  }

  return (
    

      
Count: {countRef.current}
      Increment
    
  )
}

export default App

Dans l'exemple ci-dessus, si vous cliquez sur le bouton, la fonction d'incrémentation sera appelée, ce qui augmentera le nombreRef, mais le nombre ne sera pas mis à jour à

Count : {countRef.current

mettez à jour le code avec l'exemple ci-dessous pour obtenir le résultat que vous attendez.

import { useRef, useState } from 'react'

const App = () => {
  const countRef = useRef(0)
  const [count, setCount] = useState(0)

  const increment = () => {
    countRef.current  
    setCount(countRef.current)
  }

  return (
    

      
Count: {count}
      Increment
    
  )
}

export default App

Cas d'utilisation courants pour useRef

Accéder et manipuler directement les éléments du DOM

il est possible d'utiliser le hook useRef pour accéder et modifier les propriétés des éléments HTML

const App = () => {
  const inputRef = useRef(null)

  const handleFocus = () => {
    inputRef.current.focus()
  }

  return(
    
  )
}

Valeurs persistantes

Contrairement à useState ou à une variable, useRef peut transmettre des valeurs et des données entre les rendus, telles que les données mises en cache ou les paramètres de configuration.

Optimisation des performances

Dans certains cas, l'utilisation de useRef peut aider à l'optimisation des composants en évitant les nouveaux rendus inutiles. comme si vous avez un composant qui affiche une grande liste d'éléments, vous pouvez le mettre en cache à l'aide de useRef et modifier uniquement le rendu des éléments qui ont changé.

Meilleures pratiques et considérations

• Ne pas écrire ni lire ref.current pendant le rendu
• Vous pouvez muter la propriété ref.current 
• Lorsque vous modifiez la propriété ref.current , React ne restitue pas votre composant
• Les informations sont locales à chaque copie de votre composant (contrairement aux variables externes, qui sont partagées). Vous pouvez stocker des informations entre les nouveaux rendus (contrairement aux variables régulières, qui réinitialisé à chaque rendu).
• Vous pouvez lire ou écrire des références à partir de gestionnaires d'événements ou d'effets à la place.
• Manipulation du dom avec ref

Passer une référence au composant personnalisé.

Si vous essayez de transmettre une référence à votre propre composant comme celui-ci

const inputRef = useRef(null);

return ;

Une erreur peut s'afficher dans la console :
Attention : les composants de fonction ne peuvent pas recevoir de références. Les tentatives d’accès à cette référence échoueront. Vouliez-vous utiliser React.forwardRef() ?

Pour résoudre ce problème, enveloppez le composant personnalisé avec forwardRef comme ceci :

const inputRef = useRef(null);

return ;

Composant personnalisé :

import { forwardRef } from 'react';

const MyInput = forwardRef(({ value, onChange }, ref) => {
  return (
    
  );
});

export default MyInput;

Conclusion

useRef est un hook puissant qui est principalement utilisé pour l'utilisation d'effets secondaires comme la mise en cache des données entre les rendus ou l'accès aux éléments du DOM. C'est un excellent outil pour optimiser les performances et réaliser des fonctionnalités spécifiques dans l'application React.