> For the complete documentation index, see [llms.txt](https://tkssharma.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tkssharma.gitbook.io/react-training/miscellaneous-items-day-11/hooks-useref.md).

# Hooks 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&#x20;

{% embed url="<https://codepen.io/TKSSHARMA/pen/YmwaZy>" %}