Réfs dans React

Si nous voulons mémoriser une information, mais sans que sa modification déclenche le rendu du composant, alors nous aurons besoin des réfs et respectivement du hook useRef qui fonctionne avec eux.

Une ref (ou référence) est un simple objet JavaScript avec une seule propriété current, que vous pouvez lire ou modifier.

Comme les états, les refs peuvent stocker n'importe quel type de données - cela peut être des nombres, des chaînes de caractères, des objets et même des fonctions.

Si vos données sont utilisées pour le rendu, alors stockez-les dans l'état, et si vous n'avez pas besoin de rendu, dans ce cas, l'utilisation des refs peut devenir plus efficace. De plus, contrairement à l'état, la valeur de la ref change immédiatement.

En général, les refs sont utilisées là où vous devez s'écarter de React et interagir avec des API externes - le plus souvent avec des API navigateur, qui n'affectent pas l'affichage du composant. Cela peut être par exemple stocker un id de minuteur ou stocker un objet pour lequel il n'est pas nécessaire de calculer le JSX, mais le plus souvent, il s'agit d'une interaction avec les éléments du DOM. Elles peuvent être utilisées pour gérer le focus, la sélection de texte ou la lecture de médias.

Dans la prochaine leçon, nous analyserons le travail avec les refs et le hook useRef en pratique.