ReactJS - Utilisation de useRef : Guide pour Débutants

Salut à toi, futur développeur React ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde des hooks de React, plus précisément le hook useRef. Ne t'inquiète pas si tu es nouveau dans le monde de la programmation – je serai ton guide bienveillant, expliquant tout pas à pas. Alors, prends une tasse de café (ou de thé, si c'est ton truc), et plongeons dedans !

Qu'est-ce que useRef ?

Avant de commencer à coder, comprens ce qu'est useRef. Imagine que tu as une boîte magique qui peut contenir n'importe quelle valeur que tu veux, et cette boîte ne change pas même lorsque ton composant se re-rendert. C'est essentiellement ce que useRef fait pour nous dans React !

useRef est un hook qui permet de créer une référence mutable qui persiste à travers les re-renders de composants. C'est comme avoir un compartiment secret dans ton composant où tu peux stocker des informations sans déclencher un re-render lorsque ces informations changent.

Signature du hook useRef

Voyons comment nous utilisons le hook useRef :

const refContainer = useRef(initialValue);

Ici, initialValue est la valeur avec laquelle tu veux commencer, et refContainer est un objet avec une seule propriété appelée current. Cette propriété current contient la valeur réelle à laquelle tu fais référence.

Pense-y comme une boîte spéciale avec une étiquette dessus disant "current". Ce que tu mets à l'intérieur de cette boîte devient la valeur de current.

Application du hook useRef

Maintenant, voyons comment nous pouvons utiliser useRef dans un scénario du monde réel. Imaginons que nous voulons créer une simple zone de texte qui, lorsque cliquée, se focus automatiquement et permet à l'utilisateur de commencer à taper.

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

function AutoFocusInput() {
const inputRef = useRef(null);

useEffect(() => {
inputRef.current.focus();
}, []);

return <input ref={inputRef} />;
}

Décomposons cela :

1. Nous importons useRef ainsi que useEffect de React.
2. Nous créons une ref appelée inputRef en utilisant useRef(null).
3. Nous utilisons le hook useEffect pour focus sur l'input lorsque le composant est monté.
4. Dans le JSX, nous attachons notre ref à l'élément input en utilisant l'attribut ref.

Lorsque ce composant se rend, l'input recevra automatiquement le focus. C'est comme de la magie, non ? Mais ce n'est pas de la magie – c'est la puissance de useRef !

Cas d'utilisation de useRef

Maintenant que nous avons vu un exemple de base, explorons quelques cas d'utilisation supplémentaires pour useRef. Fais-moi confiance, ce hook est plus polyvalent qu'un couteau suisse !

1. Stocker des Valeurs Précédentes

Parfois, tu peux vouloir suivre une valeur de la rendu précédent. useRef est parfait pour cela !

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

function CounterWithPrevious() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();

useEffect(() => {
prevCountRef.current = count;
}, [count]);

return (
<div>
<p>Compte actuel : {count}</p>
<p>Compte précédent : {prevCountRef.current}</p>
<button onClick={() => setCount(count + 1)}>Incrémenter</button>
</div>
);
}

Dans cet exemple, nous utilisons useRef pour stocker la valeur précédente de notre compteur. Chaque fois que le compteur change, nous mettons à jour notre ref dans le hook useEffect. Ainsi, nous avons toujours accès à la fois au compteur actuel et au compteur précédent.

2. Accéder aux Éléments DOM

useRef est également génial pour accéder directement aux éléments DOM. Créons un composant lecteur vidéo en exemple :

import React, { useRef } from 'react';

function VideoPlayer() {
const videoRef = useRef(null);

const playVideo = () => {
videoRef.current.play();
};

const pauseVideo = () => {
videoRef.current.pause();
};

return (
<div>
<video ref={videoRef} src="chemin/vers/ta/video.mp4" />
<button onClick={playVideo}>Lecture</button>
<button onClick={pauseVideo}>Pause</button>
</div>
);
}

Ici, nous utilisons useRef pour obtenir une référence à l'élément vidéo. Cela nous permet d'appeler des méthodes comme play() et pause() directement sur l'élément vidéo lorsque les boutons sont cliqués.

3. Préserver des Valeurs Entre les Rendus

useRef est également utile lorsque tu dois préserver une valeur entre les rendus sans causer un re-render. Regardons un exemple :

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

function IntervalCounter() {
const [count, setCount] = useState(0);
const intervalRef = useRef();

useEffect(() => {
intervalRef.current = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);

return () => clearInterval(intervalRef.current);
}, []);

return <div>Compte : {count}</div>;
}

Dans cet exemple, nous utilisons useRef pour stocker l'ID d'intervalle retourné par setInterval. Cela nous permet de clear l'intervalle dans la fonction de nettoyage de notre hook useEffect, évitant les fuites de mémoire.

Conclusion

Et voilà, les amis ! Nous avons traversé le territoire de useRef, explorant sa signature, comment l'appliquer, et quelques cas d'utilisation communs. Souviens-toi, useRef est comme un sidekick de confiance dans tes aventures React – toujours là lorsque tu as besoin de suivre quelque chose sans déclencher un re-render.

Voici un résumé rapide des méthodes que nous avons couvertes :

Méthode	Description
useRef(initialValue)	Crée un objet ref avec la valeur initiale fournie
ref.current	Accède ou modifie la valeur actuelle de la ref
<element ref={refObject}>	Attache une ref à un élément DOM

While you continue your React journey, you'll find many more creative ways to use useRef. It's a powerful tool that, when used correctly, can solve many tricky problems in React development.

Remember, the key to mastering React (or any programming concept) is practice. So go ahead, try out these examples, experiment with your own ideas, and don't be afraid to make mistakes. That's how we all learn and grow as developers.

Happy coding, and may the refs be with you!

Credits: Image by storyset