# How to use the useRef React hook

> Learn how the useRef React hook lets you access a DOM element imperatively by attaching a ref and reading it through the current property of the ref.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2019-07-21 | Topics: [React](https://flaviocopes.com/tags/react/) | Canonical: https://flaviocopes.com/react-hook-useref/

> Check out my [React hooks introduction](https://flaviocopes.com/react-hooks/) first, if you're new to them.

One [React](https://flaviocopes.com/react/) hook I sometimes use is `useRef`.

```js
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:

```js
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/>