Skip to content

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)

  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:

→ Get my React Beginner's Handbook
→ Read my full React Tutorial on The Valley of Code

Here is how can I help you: