How to use the useRef React hook
New Courses Coming Soon
Join the waiting lists
Find out what the useRef React hook is useful for, and how to work with it!
Check out my React hooks introduction first, if you’re new to them.
One React hook I sometimes use is useRef
.
import React, { useRef } from 'react'
This hook allows us to access a DOM element imperatively.
Here’s an example, where I log to the console the value of the DOM reference of the span element that contains the count value:
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'))
Notice the const counterEl = useRef(null)
line, and the <span ref={counterEl}>{count}</span>
. This is what sets the link.
Now we can access the DOM reference by accessing counterEl.current
.
See it on Codepen: https://codepen.io/flaviocopes/pen/orENKo/
→ Get my React Beginner's Handbook
→ Read my full
React Tutorial
on The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X