How to use the useRef() Hook

A simple guide to master useRef() in React.

In this post you’ll learn one of the most misunderstood and misused hooks, you will learn how to use the useRef() hook to create references and use them to access DOM elements.

useRef returns a mutable reference object with a single property field called current which is set to the passed argument’s value. The returned object will be retained for the component’s entire lifespan.

1 — Syntax

useRef(initialValue) is a built-in React hook that accepts one argument as the initial value and returns a reference. A reference is an object having a single property “current”, which can be accessed and changed (mutated).

useRef() syntax

2 — Basic usage

Let’s imagine for whatever reason you want to count how many times your component renders when changing the value in the input field.

2 — 1 Counting renders using the useState hook(the wrong way)

The wrong way to count component renders using useState()

This is not the right way, because when the app re-renders the renders value changes which again causes the app to re-render thus forming an infinite loop.

2 — 2 Counting renders using the useRef hook(the correct way)

The correct way to count component renders using useRef()

In this manner, you can see that the app re-renders every time you alter the state by typing something but changing the reference value itself does not trigger a re-render.

3 — The difference between reference and state

Let’s take a deeper look at the difference between state and reference, we will implement a <ButtonCounter> component that prints a message “the component has been rendered“ to the console on each render and another message showing how many times the button has been clicked.

first let’s implement ButtonCounter using useState():

ButtonCounter implementation using useState()

Notice that each time the state is updated, the component re-renders.

console log

Now let re-implement our component using the useRef() hook:

ButtonCounter implementation using useRef()

Notice this time the component is rendered only once but the count value is changing with each click.

console log

In summary

1. useRef is used to store a persistent mutable object for the full lifetime of the component.
2. useRef doesn’t trigger a rerender when mutating the .current value.
3. The reference update is synchronous, while the state update is asynchronous and triggers a re-render.

4 — Moving on to a more concrete use case

useRef is most popular for referencing dom elements. All JSX elements can have an inbuilt ref property using which we can reference dom elements. (using vanilla JavaScript we would have to use document.querySelector() etc.).

For example, You need to focus on the input field when the component mounts. To make it work you’ll need to create a reference to the input, assign the reference to the ref attribute of the input, once the component mounts call the element.focus() method on the element.

Using useref() hook to access a DOM element in react

during initial rendering, React still determines what is the output of the component and thus evaluating inputEl.current to undefined. The callback function of the useEffect(callback, []) is the right place to access inputRef.current because it invokes the callback right after mounting.

5. Conclusion

using useRef() returns a reference object. The reference object has a single property called current, you can use this property to read or update the reference value.
The reference’s value is persistent between the component re-renders.
Unlike updating the state, mutating the reference, does not trigger a re-render.
When trying to access DOM elements, refs can come in handy. Assign the reference to the element’s ref attribute so that it can be accessed using reference. current.

For more cool content and projects just like this one please Follow us and consider checking our Github Repository :

react-one - Overview