Direct DOM Access with useRef

1. What is useRef?

At its core, useRef returns a mutable object whose .current property is initialized to the value you pass as an argument (useRef(initialValue)). This object persists for the full lifetime of the component.

Crucially, there are two main use cases for useRef:

1. Storing a mutable value that does not cause a re-render when updated. This is the key difference from useState. If you want to keep track of a value across renders but don't want the component to update every time the value changes, a ref is the perfect tool.
2. Accessing DOM nodes. This is the most common use case and the focus of our lesson.

Let's start by understanding the first point, as it clarifies the fundamental nature of refs.

As you saw, the ref object is simply a container, { current: ... }, that you can read from and write to. React ensures this container is the same one on every render of your component.

2. The Primary Use Case: Accessing DOM Elements

Now for the main event. In React, you generally describe what the UI should look like declaratively with JSX, and React handles updating the actual DOM. However, sometimes you need to perform an imperative action on a specific DOM element, such as calling its .focus() method or measuring its size. This is where useRef shines.

The process involves three simple steps:

1. Declare a ref in your component: const myRef = useRef(null);
2. Attach the ref to a JSX element using the ref attribute: <input ref={myRef} />
3. Access the DOM node via the ref's .current property, which will now hold the DOM element itself: myRef.current.focus();

React will automatically set the .current property to the corresponding DOM node when the component mounts and set it back to null when it unmounts.

The following video demonstrates this exact flow by building a component that focuses an input field when a button is clicked.

Here is a code example summarizing the pattern you just saw:

import React, { useRef } from 'react';

function FocusInput() {
  // 1. Declare a ref to hold the input element
  const inputRef = useRef(null);

  const handleFocusClick = () => {
    // 3. Access the DOM node via .current and call its method
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <>
      {/* 2. Attach the ref to the JSX element */}
      <input ref={inputRef} type="text" placeholder="Click button to focus me" />
      <button onClick={handleFocusClick}>Focus the Input</button>
    </>
  );
}

This pattern is extremely useful for improving accessibility and user workflow, such as automatically focusing the first field in a login form or a search bar.

3. A Word of Caution: Don't Abuse Refs

Because useRef gives you direct access to the DOM, it can be tempting to use it to manually change things, like an input's value or an element's style. You should avoid this.

React's power comes from its declarative nature and its control over the DOM via state and props. If you start manipulating the DOM manually with refs, you are fighting against the framework. This can lead to unpredictable behavior because React won't be "aware" of the changes you've made.

• To change what's rendered on the screen, use state.
• To perform an imperative action on a DOM element (like focusing it), use a ref.

Think of useRef as a necessary escape hatch for situations where the declarative approach isn't possible, not as a primary tool for building your UI.

Conclusion

You've now added another essential hook to your toolkit. While state management hooks help you control your component's data and rendering, useRef provides a bridge to the browser's DOM for imperative actions.

Key Takeaways:

• useRef creates a persistent, mutable object with a .current property.
• Updating a ref's .current value does not trigger a component re-render.
• The primary use case for useRef is to get a direct reference to a DOM element by passing the ref to the element's ref attribute.
• Once you have the DOM element in ref.current, you can call its methods imperatively (e.g., ref.current.focus()).
• Avoid using refs to manipulate the DOM declaratively (e.g., changing values or content). Use state for that.

Preview of the Next Lesson:

We've covered hooks for state (useState, useReducer), context (useContext), and side effects (useEffect). In the next lesson, we'll look at a hook designed for performance optimization: useMemo. You'll learn how to use it to "memoize" the results of expensive calculations so they don't have to be re-run on every render, making your application faster and more efficient.