DOM access

Learn to reach a DOM node through a ref.

DOM access

The most common use of useRef is direct DOM access. You create a ref with const inputRef = useRef(null);, then bind it to an element with <input ref={ '{ inputRef }' } />.

Once bound, inputRef.current points to the real DOM element. So you can programmatically focus with inputRef.current.focus(), read the value with inputRef.current.value.

React usually discourages direct DOM access, but it's unavoidable in some cases: autofocus, measuring (getBoundingClientRect), canvas or video control, third-party library integration.

Initial value null

For DOM binding, the ref's initial value is usually null: useRef(null). This is so current doesn't point to any element before binding.

On the first render, React binds the ref and current points to the real DOM element. When the component unmounts, React sets it back to null.

So inputRef.current.focus() goes inside a useEffect or an event handler; you don't call it directly during the first render.

Exercise Auto focus

Complete the skeleton. Write a SearchBox component. Create inputRef = useRef(null). Inside useEffect, call inputRef.current.focus(). Show <input ref={ '{ inputRef }' } placeholder="Search" />. Export it.

Show example solution

import { useRef, useEffect } from "react";

function SearchBox() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  return <input ref={inputRef} placeholder="Search" />;
}

export default SearchBox;

Test yourself

DOM binding

To bind a ref to a DOM element, use the ____ prop.

Show answer

To bind a ref to a DOM element, use the ref prop.

Which operation needs useRef?
- Sorting an array
- Changing CSS
- Putting a value in state
- Programmatic focus on an input
Show answer

Programmatic focus on an input — useRef is used for programmatic focus.
Match the DOM ref steps

useRef(null)

Initial value
ref={inputRef}

Binding
current.focus()

Focus
useEffect

Side effect

Next lesson: Timer example

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies