Le hook useRef dans React

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