Comment utiliser le hook useRef React

Découvrez à quoi sert le hook useRef React et comment l'utiliser!

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.

Tech Wiki Online!