Le hook useRef dans React

7 Questions

Associez les définitions suivantes à leur utilisation correspondante dans l'hook useRef de React :

Gérer l'état qui ne déclenche pas de réaffichages = useState Créer une référence à un noeud DOM ou une valeur qui persiste à travers les réaffichages = useRef Créer une fonction mémoisée qui a accès à la valeur de la référence = useCallback Mettre à jour la valeur d'une référence directement = ref.current

Associez les déclarations de refs suivantes à leur utilisation correspondante :

const inputRef = useRef(null) = Référence à un noeud DOM const countRef = useRef(0) = Référence à une valeur numérique const timerId = useRef(null) = Référence à un ID de timer const animationState = useRef(false) = Référence à un état d'animation

Associez les propriétés suivantes à leur fonctionnalité correspondante dans l'hook useRef de React :

current = Propriété qui stocke la valeur de la référence initialValue = Valeur initiale de la référence ref = Attribut pour assigner la référence à un noeud DOM useCallback = Hook pour créer une fonction mémoisée

Associez les avantages suivants à leur caractéristique correspondante dans l'hook useRef de React :

Permet de mettre à jour la valeur d'une référence sans déclencher de réaffichage = Utilisation avec des valeurs Permet d'accéder à un noeud DOM directement = Utilisation avec des noeuds DOM Permet de stocker des valeurs qui ne déclenchent pas de réaffichages = Utilisation avec des valeurs Permet de créer des références à des ID de timer = Utilisation avec des ID de timer

Associez les limitations suivantes à leur caractéristique correspondante dans l'hook useRef de React :

Ne doit pas être utilisé pour stocker des états qui déclenchent des réaffichages = Conseil d'utilisation de useRef Ne met à jour la propriété current que lorsque le composant est réaffiché = Comportement de useRef Doit être utilisé avec des valeurs primitives = Conseil d'utilisation de useRef Ne permet pas d'accéder directement à la valeur de la référence = Limitation de useRef

Associez les utilisations suivantes à leur type de référence correspondant :

Mettre à jour un élément DOM directement = Référence à un noeud DOM Stocker un ID de timer = Référence à une valeur Créer un état d'animation = Référence à une valeur Mettre à jour un compteur = Référence à une valeur

Associez les actions suivantes à leur effet correspondant sur l'hook useRef de React :

Mettre à jour la valeur de la référence = Met à jour la propriété current Assigner la référence à un noeud DOM = Lie la référence au noeud DOM Créer une nouvelle référence = Crée un nouvel objet avec une propriété current Utiliser la valeur de la référence = Accède à la propriété current

Study Notes

What is the useRef hook?

A hook in React that allows you to create a reference to a DOM node or a value that persists across re-renders
Useful for managing state that doesn't trigger re-renders, such as updating a DOM element directly

Creating a ref with useRef

const ref = useRef(initialValue)
initialValue is the initial value of the ref, can be a DOM node or any other value
Returns an object with a current property that holds the reference value

Using useRef with DOM nodes

const inputRef = useRef(null)
Assign the ref to a DOM node using the ref attribute: ``
Can access the DOM node using inputRef.current

Using useRef with values

const countRef = useRef(0)
Can update the value using countRef.current = countRef.current + 1
Useful for storing values that don't trigger re-renders, such as timer IDs or animation states

Important notes

useRef only updates the current property when the component re-renders, not when the ref value changes
Should not be used to store state that triggers re-renders, use useState instead
Can be used with useCallback to create a memoized function that has access to the ref value

Qu'est-ce que l'hook useRef ?

Permet de créer une référence à un nœud DOM ou une valeur qui persiste lors des re-rendus
Utile pour gérer un état qui ne déclenche pas de re-rendus, comme la mise à jour directe d'un élément DOM

Créer une référence avec useRef

const ref = useRef(valeurInitiale)
valeurInitiale est la valeur initiale de la référence, peut être un nœud DOM ou toute autre valeur
Retourne un objet avec une propriété current qui contient la valeur de la référence

Utiliser useRef avec des nœuds DOM

const inputRef = useRef(null)
Assigner la référence à un nœud DOM à l'aide de l'attribut ref : ``
Accéder au nœud DOM à l'aide de inputRef.current

Utiliser useRef avec des valeurs

const countRef = useRef(0)
Mettre à jour la valeur à l'aide de countRef.current = countRef.current + 1
Utile pour stocker des valeurs qui ne déclenchent pas de re-rendus, comme des ID de minuterie ou des états d'animation

Notes importantes

useRef met à jour la propriété current uniquement lors du re-rendu du composant, et non lors de la modification de la valeur de la référence
Ne pas utiliser pour stocker un état qui déclenche des re-rendus, utiliser useState à la place
Peut être utilisé avec useCallback pour créer une fonction mémorisée qui a accès à la valeur de la référence