Skip to main content

React's useRef hook

Originally, useRef was used to reference elements in the DOM and it still can be used for it. Yet, it also offers a great alternative to useState, as we will see. useRef can, just like useState, hold values. Here is, what you need to know in short:

  • useRef can hold values via the .current attribute
  • Altering the values useRef holds DOES NOT trigger a re-render
  • The value persist between different renders
  • useRef is completely separate from the render-cycle of the component

Using useRef for holding values

useRef is often the ideal alternative when useState doesn't work. useState might fail to provide a solution in these scenarios, because:

  1. The state does not persist when it should do
  2. Changing the state causes a re-render and often an endless loop

Here is a good example of useRef for counting the times the component re-rendered:

import React, { useRef, useEffect, useState } from 'react'

export default function App() {
const rC = useRef(0)
const [count, setCount] = useState(0)

useEffect(() => {
rC.current += 1

return (
<p>Component rendered: {rC.current} times</p>
<p>Counter: {count}</p>
<button onClick={() => setCount(count + 1)}>Add</button>

Referencing DOM elements

import React, { useRef, useEffect } from 'react'

export default function App() {
const pRef = useRef()

useEffect(() => {
const el = pRef.current
}, [])

return (
<p ref={pRef}>Hello world!</p>

Logs the following code on the initial render:

attributes: {}, innerHTML: "Hello world!", nodeType: 1, tagName: "p"

Differences of useRef and useState

To sum up, here are a couple differences between both hooks, from the view point of useState:

  • Values are accessed with .current in useRef, instead of with a single function
  • Updating values does not force a re-render, therefore, useRef will not cause the typical infinite re-render bug
  • Setting and altering values in useRef is done with assigning to .current