Dans React, les hooks sont des fonctions spéciales qui permettent aux développeurs d’utiliser l’état et d’autres fonctionnalités de React sans avoir besoin de composants de classe. Parmi ces hooks, le hook useRef se distingue comme un outil précieux pour gérer les valeurs et accéder aux éléments du modèle d’objet du document (DOM).
Le hook useRef est un outil puissant qui offre une flexibilité et des capacités immenses, mais les développeurs le comprennent souvent mal et l’utilisent à mauvais escient.
Dans cet article, nous allons plonger dans les profondeurs du hook useRef, en démystifiant son objectif, sa fonctionnalité et ses meilleures pratiques. À la fin de ce guide, vous comprendrez ce qu’est le hook et obtiendrez des informations précieuses sur la manière d’exploiter efficacement tout son potentiel.
Qu’est-ce que le hook useRef ?
Le hook useRef sert deux objectifs principaux : stocker des valeurs mutables qui n’entraînent pas un nouveau rendu lorsqu’elles sont mises à jour et stocker des références à des éléments du DOM. Voyons comment il fonctionne plus en détail.
Lorsqu’un composant est rendu dans React, son état et ses autres variables sont généralement réinitialisés. Cependant, il y a des cas où vous avez besoin de conserver certaines valeurs même lorsque le composant est rendu à nouveau. C’est là que le hook useRef entre en jeu. Il vous permet de créer une référence à une valeur qui persistera entre les rendus, garantissant que la valeur reste intacte même si d’autres parties du composant changent.
En outre, le hook useRef est essentiel pour travailler avec les éléments du DOM. Dans React, l’accès et la modification directe des éléments du DOM peuvent être difficiles, en particulier sans le hook useRef. Avec useRef, vous pouvez obtenir une référence à un élément DOM spécifique et effectuer des opérations sur celui-ci. Cela élimine le besoin de bibliothèques externes ou de solutions de contournement compliquées.
Implémentation de useRef dans React
Pour commencer à utiliser le hook useRef dans votre projet React, importez-le depuis le package React :
import { useRef } from 'react';Une fois importé, vous pouvez déclarer une variable ref dans votre composant fonctionnel à l’aide du hook useRef:
const myRef = useRef();Vous disposez à présent d’un objet ref, myRef, que vous pouvez utiliser pour stocker des valeurs et y accéder. Pour utiliser la variable myRef avec n’importe quel élément, affectez-la à la propriété ref de l’élément.
<div ref={myRef}>This is an example element</div>Dans l’exemple ci-dessus, vous attribuez à l’élément div la propriété ref. Cela vous permet de référencer et d’accéder à l’élément en utilisant la variable myRef ailleurs dans le composant.
Pour accéder à la valeur stockée dans la référence créée, vous pouvez utiliser la propriété .current de l’objet myRef.
const myRefValue = myRef.current;
console.log(myRefValue); // <div>This is a sample div</div>Manipulation du DOM avec le hook useRef
La manipulation du DOM est une tâche courante dans le développement web, car elle vous permet de modifier et de mettre à jour dynamiquement le contenu, la structure et l’apparence d’une page web.
Dans le développement JavaScript traditionnel, l’accès aux éléments du DOM et leur manipulation nécessitent l’utilisation de méthodes telles que getElementById, querySelector ou getElementsByClassName pour sélectionner des éléments spécifiques dans le document. Une fois l’élément sélectionné, vous pouvez mettre à jour le contenu, modifier les styles ou attacher des récepteurs d’évènements.
// HTML
<div>
<input type="text" id="myInput" />
<button id="focusButton">Focus Input</button>
</div>
// JavaScript
<script>
const inputRef = document.getElementById('myInput');
const focusButton = document.getElementById('focusButton');
const handleFocus = function() {
inputRef.focus();
};
focusButton.addEventListener('click', handleFocus);
</script>Cependant, lorsque vous travaillez avec des éléments du DOM dans un composant React, le processus n’est pas le même en raison du DOM virtuel du composant et de la nécessité de gérer efficacement les mises à jour. Les développeurs ont souvent eu recours à diverses approches, telles que l’utilisation de refs ou de bibliothèques externes comme jQuery, pour accéder aux éléments DOM et les manipuler.
Avec l’introduction du hook useRef dans React, le processus de travail avec les éléments du DOM au sein des composants a été considérablement rationalisé. Le hook useRef fournit un moyen simple de créer une référence à un élément DOM, le rendant facilement accessible et manipulable dans le contexte du composant.
import { useRef } from 'react';
const FocusComponent = () => {
const inputRef = useRef(null);
const handleFocus = () => {
// accessing the input element
let inputElement = inputRef.current;
// modify the DOM element
inputElement.focus();
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleFocus}>Focus Input</button>
</div>
);
}Dans cet exemple, le hook useRef est utilisé pour créer une référence inputRef qui pointe vers l’élément input. Lorsque vous cliquez sur le bouton « Focus Input », la fonction handleFocus utilise inputRef.current.focus() pour mettre l’accent sur l’élément d’entrée directement. Ceci démontre comment le hook useRef simplifie le processus de travail avec les éléments DOM dans React.
Autre exemple : vous souhaitez manipuler une page div en changeant son arrière-plan lorsqu’un bouton est cliqué :
import { useRef } from 'react';
const ExampleComponent = () => {
const divRef = useRef();
const handleClick = () => {
divRef.current.style.backgroundColor = 'red';
};
return (
<div>
<div ref={divRef}>This is a sample div</div>
<button onClick={handleClick}>Change Color</button>
</div>
);
}Dans cet exemple, vous créez une référence avec le hook useRef appelée divRef. Vous assignez cette référence à la propriété ref de l’élément div.
Lorsque vous cliquez sur le bouton « Change Color », la fonction handleClick est invoquée. Dans la fonction, vous pouvez accéder à l’élément div avec divRef.current. Dans ce cas, vous modifiez la couleur d’arrière-plan de l’élément div en mettant à jour sa propriété style.backgroundColor avec la valeur red.
divRef.current.style.backgroundColor = 'red';Préservation des valeurs à travers les re-renders
La préservation des valeurs à travers les re-renders est un cas d’utilisation puissant du hook useRef. Elle est particulièrement utile lorsque vous avez des valeurs qui doivent persister tout au long du cycle de vie du composant sans déclencher un nouveau rendu.
Pour mieux comprendre ce concept, comparons le hook useRef et le hook useState à l’aide d’exemples réels :
Exemple avec le crochet useState :
import { useState } from 'react';
function CounterComponent() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}Dans cet exemple, vous utilisez le hook useState pour gérer la variable d’état count. Chaque fois que la fonction increment est appelée, l’état count est mis à jour à l’aide de setCount. Cela déclenche un nouveau rendu du composant, reflétant la valeur mise à jour de count.
Exemple avec le hook useRef :
import React, { useRef } from 'react';
function CounterComponent() {
const countRef = useRef(0);
const increment = () => {
countRef.current = countRef.current + 1;
console.log('Count:', countRef.current);
};
return (
<div>
<p>Count: {countRef.current}</p>
<button onClick={increment}>Increment</button>
</div>
);
}Dans cet exemple, vous utilisez le hook useRef pour créer une variable countRef, initialisée avec une valeur initiale de 0. Chaque fois que la fonction increment est appelée, vous mettez directement à jour la valeur countRef.current sans déclencher un nouveau rendu. La valeur mise à jour est enregistrée dans la console.
En utilisant le hook useRef, le composant n’est pas rendu à nouveau lorsque la valeur countRef.current change. Cela peut être avantageux dans les scénarios où vous avez des valeurs qui doivent être modifiées mais qui n’affectent pas le processus de rendu.
Notez que lorsque vous utilisez le hook useRef de cette manière, les modifications de la valeur ref ne déclenchent pas automatiquement de nouveaux rendus. Si vous devez refléter la valeur mise à jour dans l’interface utilisateur, vous pouvez soit gérer manuellement la mise à jour, soit combiner le hook useRef avec d’autres hooks ou variables d’état pour obtenir le comportement souhaité.
Résumé
Dans cet article, vous avez exploré le hook useRef dans React, en comprenant son but, sa mise en œuvre et ses applications pratiques. Vous avez appris comment utiliser useRef pour accéder et modifier les éléments du DOM et préserver les valeurs.
Une bonne pratique pour l’utilisation du hook useRef est d’éviter de l’utiliser à outrance. Utilisez-le lorsque vous avez spécifiquement besoin d’accéder et de manipuler des éléments du DOM ou de préserver des valeurs à travers les re-renders.
Le hook useRef peut également être utilisé pour divers scénarios pratiques tels que les animations et les transitions, la mise en cache de valeurs ou de résultats intermédiaires, et bien d’autres choses encore qui permettent à votre application React de se démarquer.
Créez votre prochaine application React et déployez-la gratuitement sur l ‘hébergement d’applications de Kinsta afin de pouvoir y accéder en direct et la partager avec le monde entier !
À vous de jouer. Que pensez-vous du hook useRef ? N’hésitez pas à le partager avec nous dans la section des commentaires ci-dessous.
