Le hook useRef pour travailler avec les refs dans React

Dans cette leçon, nous allons travailler avec les refs. Pour plus de clarté, analysons le fonctionnement du hook useRef en le comparant au hook useState.

Créons un composant avec un bouton :

return (
	<div>
		<button>
			state click
		</button>
	</div>
);

Importons useState dans le composant :

import { useState } from 'react';

Et créons un état state :

const [state, setState] = useState(0);

Maintenant, faisons en sorte qu'un clic sur le bouton incrémente notre state de 1. Nous afficherons la valeur de l'état directement dans le texte du bouton :

<button onClick={handleStateClick}>
	state click: {state}
</button>

Décrivons la fonction de gestion du clic sur le bouton handleStateClick :

function handleStateClick() {
	setState(state + 1);
}

Cliquons sur le bouton et observons comment la valeur de l'état augmente.

Maintenant, créons un composant App, mais en utilisant non pas l'état, mais une ref.

Pour commencer, importons useRef dans le composant :

import { useRef } from 'react';

Et créons une ref ref. Le hook useRef renvoie un objet ref avec une seule propriété current, qui nous intéressera par la suite. Définissons sa valeur initiale à 0 :

const ref = useRef(0);

Attachons un gestionnaire de clic au bouton. N'oubliez pas que nous devons lire/modifier non pas la ref elle-même, mais sa propriété current :

<button onClick={handleRefClick}>
	ref click: {ref.current}
</button>

Ajoutons la fonction pour gérer le clic sur notre bouton. Ici, nous allons incrémenter current de 1, comme dans l'exemple précédent avec l'état. Contrairement à l'état, où une fonction setState est nécessaire pour modifier sa valeur, nous travaillons directement avec la propriété de la ref :

function handleRefClick() {
	ref.current = ref.current + 1;
}

Maintenant, cliquons sur notre bouton. Et que voyons-nous ? Lorsque nous cliquons dessus, la valeur reste à 0, comme initialement, et ne change pas.

Vous pourriez bien sûr commencer à douter que la valeur change réellement. Vérifions cela. Pour ce faire, ajoutons une ligne de code supplémentaire dans la fonction du gestionnaire de clic pour afficher la valeur de current dans la console :

function handleRefClick() {
	ref.current = ref.current + 1;
	console.log('ref click: ' + ref.current);
}

Maintenant, en ouvrant la console du navigateur, cliquons à nouveau sur le bouton et assurons-nous que la valeur change bien à chaque clic et qu'il n'y a pas de tromperie.

Nous voyons maintenant que, contrairement à l'état, la modification de la valeur d'une ref ne déclenche pas le rendu du composant. C'est pourquoi nous voyons à chaque fois dans le texte du bouton la valeur initiale 0.

Ainsi, si vos données sont utilisées pour le rendu, stockez-les dans l'état, et si vous n'avez pas besoin de rendu, dans ce cas, l'utilisation de refs peut être plus efficace.

Supposons que votre composant ait un paragraphe avec le texte 'text' et un bouton. Faites en sorte qu'à chaque clic sur le bouton, un point d'exclamation soit ajouté à la fin du texte du paragraphe. Réalisez cela en utilisant l'état.

Créez un composant App, mais au lieu de l'état, utilisez maintenant une ref. Assurez-vous que lors de l'appui sur le bouton, le texte du paragraphe ne changera pas. Ajoutez également l'affichage du texte du paragraphe dans la console, ouvrez-la et assurez-vous qu'en réalité, le texte change.