React Accessing DOM Elements

In the last lesson, the React useRef Hook, you saw a ref is a little box that holds a value across re-renders. Now let’s use its number one job: grabbing a real DOM element so you can focus it, scroll to it, or measure it.

🤔 Why do we need this?

Most of the time React handles the screen for you. But a few jobs need the real element in your hands:

• You want to put the cursor inside an input as soon as a page opens. That’s focus, and React has no state for it.
• You want to scroll the page down to a certain section when a button is clicked.
• You want to measure how wide or tall an element is right now.
• You want to read the current value straight from an input without tracking every keystroke.

None of those can be done by changing state. They need the actual DOM element. So React gives you a clean way to reach it, instead of going around React with something like document.getElementById.

🧩 What is accessing the DOM with a ref?

Accessing the DOM means getting the real HTML element that React put on the page, so you can call browser methods on it. A DOM node is that live element in the page, like the actual <input> the user sees and types into.

• React normally keeps the real DOM hidden from you and updates it itself. That’s a good thing.
• But for a few jobs, like focus or measuring, you need the live element directly.
• A ref is the bridge. You attach it to a JSX element, then React fills it with the matching DOM node for you.

Think of it like a name tag you stick on one element. After React draws the page, you look at the tag and it points you straight to that element.

🛠️ The three steps

Getting a DOM element is always the same small pattern: create the ref, attach it, then use it.

This component creates a ref, attaches it to an input, and is ready to use that input later.

import { useRef } from "react";

function SearchBox() {
  const inputRef = useRef(null);

  return <input ref={inputRef} />;
}

Let’s read the three steps.

• const inputRef = useRef(null) creates the ref. You start it at null because the element doesn’t exist yet.
• ref={inputRef} attaches the ref to the JSX element. This is the special ref attribute React understands.
• After React draws the screen, inputRef.current points to the real <input> DOM node, ready for you to use.

So you make the box, hand it to the element, and React quietly fills the box with the live node.

⏰ Read myRef.current AFTER render

This is the part people trip on. During the first render the element does not exist yet, so the ref is still empty. You only read it later.

This shows the wrong place to read the ref versus the right place.

function SearchBox() {
  const inputRef = useRef(null);

  // ❌ Wrong - runs during render, the element isn't on the page yet
  console.log(inputRef.current); // null

  function focusInput() {
    // ✅ Right - runs later, after render, so the node is there
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus the input</button>
    </>
  );
}

Here’s why the timing matters:

• During render React hasn’t created the real <input> yet, so inputRef.current is still null. Reading it there gives you nothing.
• React fills inputRef.current with the DOM node after it draws the screen.
• So you read the ref in an event handler or inside an effect, never straight in the body of the component.

🎯 Example: a button that focuses an input

Let’s do the classic one. We have an input and a button, and clicking the button drops the cursor into the input.

This form focuses the input when you click the button, using the ref’s DOM node.

import { useRef } from "react";

function SearchBox() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input ref={inputRef} placeholder="Search..." />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  );
}

Let’s walk through the flow.

• const inputRef = useRef(null) makes an empty ref.
• ref={inputRef} ties it to the <input>, so after render inputRef.current is the real input element.
• When you click the button, handleClick runs. It calls inputRef.current.focus(), which is a real DOM method on the input.
• The cursor jumps into the box, ready for typing. State never changed, so React did not re-render. The browser just focused the element.

⚖️ The React way vs reaching into the DOM

Refs are powerful, so it’s easy to overuse them. The rule is simple: only use a ref for things React can’t do with state.

This shows the wrong instinct versus the right one.

// ❌ Wrong - going around React to read a value
function handleSubmit() {
  const value = document.getElementById("email").value; // skips React
}

// ✅ Right - let state hold the value, use a ref only for focus
function handleSubmit() {
  console.log(email);        // value already lives in state
  inputRef.current.focus();  // ref only for the DOM-only job
}

Here’s the line to remember:

• For values, text, and what shows on screen, use state. That’s what React is built for, and it keeps the screen in sync.
• Reaching in with document.getElementById goes around React. The two can fall out of sync and cause hard bugs.
• Use a ref only for jobs React has no answer for, like focus, scrolling to an element, or measuring its size.

🧩 What You’ve Learned

• ✅ A ref’s main job is getting a real DOM element so you can call browser methods on it
• ✅ Create the ref with useRef(null), since the element doesn’t exist yet
• ✅ Attach it with the ref attribute on a JSX element, like ref={inputRef}
• ✅ After render, inputRef.current points to the real DOM node
• ✅ Read .current after render, in an event handler or an effect, never during render
• ✅ Use refs for DOM-only jobs like .focus(), .scrollIntoView(), or measuring size
• ✅ Use state for data and what shows on screen, not document.getElementById

🚀 What’s Next?

Now you can grab a real DOM element and call methods on it. Next we’ll zoom in on the most common one of these, putting the cursor where the user needs it, and see the clean patterns for it.

React Managing Focus with useRef