Le hook useRef

16min
il y a 2 ans
Télécharger la vidéo
Résumé Support

Le hook useRef va permettre de référencer une valeur qui n'est pas nécessaire au code du rendu et contrairement à l'état sa valeur pourra être mutée.

const ref = useRef(initialValue) // On peut ensuite modifier ou récupérer la valeur via la propriété "current" ref.current = "Nouvelle valeur"

Lorsque l'on modifie la valeur à l'intérieur d'une référence il n'y a pas de changement d'état, le composant n'est alors pas re rendu. Aussi dans le code JSX on ne fera jamais appel à une référence.

// Interdit ! return <div>{ref.current}</div>

Ref et accès au DOM

Les références seront souvent utilisées pour récupérer un élément du DOM afin d'effectuer des opérations spécifiques.

function App () { const inputRef = useRef(null) const handleClick = () => { inputRef.current.focus() } return <div> <input type="text" ref={inputRef}/> <button onClick={handleClick}> Focaliser le champs </button> </div> }

Aller plus loin

En apprendre plus sur la documentation