Comment utiliser le hook useRef React

Découvrez monPrésentation des crochets Reactd'abord, si vous êtes nouveau pour eux.

Un hook React que j'utilise parfois estuseRef.

import React, { useRef } from 'react'

Ce hook nous permet d'accéder impérativement à un élément DOM.

Voici un exemple, où je connecte à la console la valeur de la référence DOM de l'élément span qui contient la valeur de comptage:

import React, { useState, useRef } from 'react'
const Counter = () => {
const [count, setCount] = useState(0)
const counterEl = useRef(null)
const increment = () => {
setCount(count + 1)
console.log(counterEl)
}
return (
<>
Count: <span ref={counterEl}>{count}</span>
<button onClick={increment}>+</button>
</>
)
}
ReactDOM.render(<Counter />, document.getElementById(‘app’))

Remarquez leconst counterEl = useRef(null)ligne, et le<span ref={counterEl}>{count}</span>. C'est ce qui établit le lien.

Nous pouvons maintenant accéder à la référence DOM en accédantcounterEl.current.

A voir sur Codepen:

Voir le styloRéagir l'utilisationRef hookpar Flavio Copes (@flaviocopes) surCodePen.