useRef |
Utilise la référence |
|---|---|
| React | |
Syntaxe
| const ref = useRef(initialValue) |
Description
useRef est un crochet React vous permettant de référencer une valeur qui n'est pas nécessaire pour le rendu.
Référence
| useRef(initialValue) |
Appelez useRef au niveau supérieur de votre composante pour déclarer une référence.
- import { useRef } from 'react';
-
- function MyComponent() {
- const intervalRef = useRef(0);
- const inputRef = useRef(null);
- // ...
Paramètres
| Nom | Description |
|---|---|
| initialValue | Valeur initiale souhaitée pour la propriété current de l'objet ref. Ce paramètre peut être de n'importe quel type. Cet argument est ignoré après le rendu initial. |
Valeurs renvoyées
useRef renvoie un objet avec une seule propriété :
current : Initialement, la valeur est définie sur la valeur initialValue que vous avez passée. Vous pouvez la définir ultérieurement. Si vous passez l'objet ref à React en tant qu'attribut ref à un noeud JSX, React définira sa propriété current.
Lors des rendus suivants, useRef renverra le même objet.
Mises en garde
Vous pouvez modifier la propriété ref.current. Contrairement à state, elle est modifiable. Cependant, si elle contient un objet utilisé pour le rendu (par exemple, une partie de votre état), vous ne devez pas modifier cet objet.
Lorsque vous modifiez la propriété ref.current, React ne réaffiche pas votre composante. React n'est pas conscient de la modification, car une ref est un objet JavaScript simple.
N'écrivez ni ne lisez ref.current pendant le rendu, sauf lors de l'initialisation. Cela rend le comportement de votre composante imprévisible.
En mode strict, React appellera votre fonction de composante deux fois afin de vous aider à détecter les impuretés accidentelles. Ce comportement est réservé au développement et n'affecte pas la production. Chaque objet ref sera créé deux fois, mais l'une des versions sera supprimée. Si votre fonction de composant est pure (comme elle devrait l'être), cela ne devrait pas affecter son comportement.
Utilisation
Référencer une valeur avec une référence
Appelez useRef au niveau supérieur de votre composante pour déclarer une ou plusieurs références.
- import { useRef } from 'react';
-
- function Stopwatch() {
- const intervalRef = useRef(0);
- // ...
useRef renvoie un objet ref dont la propriété current est initialement définie sur la valeur initiale que vous avez fournie.
Lors des rendus suivants, useRef renverra le même objet. Vous pouvez modifier sa propriété current pour entreposer des informations et les consulter ultérieurement. Cela peut vous rappeler state, mais il existe une différence importante.
La modification d'une ref ne déclenche pas de nouveau rendu. Les refs sont donc idéales pour entreposer des informations n'affectant pas le rendu visuel de votre composante. Par exemple, si vous devez entreposer un identifiant d'intervalle et le récupérer ultérieurement, vous pouvez le placer dans une ref. Pour mettre à jour la valeur dans la ref, vous devez modifier manuellement sa propriété current :
- function handleStartClick() {
- const intervalId = setInterval(() => {
- // ...
- }, 1000);
- intervalRef.current = intervalId;
- }
Plus tard, vous pouvez lire cet ID d'intervalle à partir de la référence afin de pouvoir appeler clear cet intervalle :
- function handleStopClick() {
- const intervalId = intervalRef.current;
- clearInterval(intervalId);
- }
En utilisant une référence, vous garantissez :
- Vous pouvez entreposer des informations entre les rendus (contrairement aux variables classiques, qui se réinitialisent à chaque rendu);
- La modification de cette référence ne déclenche pas de rendu (contrairement aux variables d'état, qui déclenchent un rendu) ;
- Les informations sont locales à chaque copie de votre composante (contrairement aux variables externes, qui sont partagées).
La modification d'une référence ne déclenche pas de rendu. Les références ne sont donc pas adaptées au entreposage des informations que vous souhaitez afficher à l'écran. Utilisez plutôt state pour cela. En savoir plus sur le choix entre useRef et useState.