This video is available to students only

useRef Hook

While less often discussed, the useRef Hook deserves covering because a time will come when it's the right solution to reach for; here, we'll talk about how useRef's "mutable" value property can be useful.

If you've written React code before, you may already be familiar with React's refs.

In the React of yesteryear, refs provided a way to access DOM nodes or React elements where you needed to imperatively modify a child outside of the typical data flow.

Reasons for using refs include situations like:

  • Managing focus, text selection, or media playback

  • Triggering imperative animations

  • Integrating with third-party DOM libraries

Generally, refs have been thought of as an escape hatch, and the consensus was that reaching for refs often might indicate that state should be owned somewhere else in the component hierarchy.

Imperative vs declarative programming

Whenever possible, let React handle the state of the app and the "how" of each component (aka declarative handling).

But when the situation calls for us to handle the "how" (like focusing on a particular DOM element once it's rendered), refs are the way to do so (aka imperative handling).

With the release of hooks, useRef got an update that made it easier to use, and I find it a lot more useful today than ever before.

Not only can we use useRef to access DOM elements directly, but we can also use it to hold mutable values that won't trigger a component re-render but will persist the values while the component's mounted.

Here, we'll explore the usefulness of useRef for those instances when we need to direct a React component on how to handle a DOM element.

Sample useRef code#

Here's an example that shows two common use case scenarios for the useRef Hook: using it to focus on a particular input and using it to evaluate the input's new value compared to its old value.

useRef to focus on an input#

The first thing you'll see when the example code loads is a button titled Focus the input. Click it, and you'll notice a cursor appear in the input box, and you can start typing numbers or use the arrow keys to adjust the number up and down.

Before we look at the code causing this focus on the input box, let's talk about useRef in general; the code will make more sense afterward.

How does useRef work?#

useRef returns a mutable ref object whose .current property is initialized to the passed argument. You might think of it sort of like a box holding that value in its .current property.

A mutable value is any value that can change.

It’s handy for keeping any mutable value around, similar to how you’d use instance fields in classes.

The useRef Hook operates similarly to how you can pass a ref object to React like this:

React will set its .current property to the corresponding DOM node whenever that node changes.

The returned object will then persist for the full lifetime of the component.

This works because useRef() creates a plain JavaScript object. The only difference between useRef() and creating a {current: ... } object yourself is that useRef will give you the same ref object on every render.

Keep in mind that useRef doesn’t notify you when its content changes. Mutating the .current property doesn’t cause a re-render.

Start a new discussion. All notification go to the author.