React Refs: A Comprehensive Guide

In React, UI is typically managed using state and props, allowing React to automatically update the DOM based on data. However, there are times when you need to directly access or manipulate DOM elements (e.g., focusing an input field, scrolling to a position, or measuring an element’s size). This is where refs (references) come into play.

What Are Refs?

Refs provide a way to "hold a reference" to a DOM element or a value without relying on state or causing a re-render. Think of refs as "pointers" to elements you want to interact with directly.

Why Use Refs?

React encourages a declarative approach, where you define "what the UI should look like" using state/props, and React handles the rest. However, sometimes an imperative approach is necessary, where you directly command the DOM. Refs enable this imperative behavior without disrupting React's flow.

When to Use Refs?

• Focusing or blurring an input field.
• Scrolling to a specific element.
• Measuring an element’s size/position.
• Integrating with external libraries that require direct DOM access.

How to Use Refs?

React provides the useRef hook to create refs. You then attach the ref to a JSX element using the ref attribute.

Basic Example: Focusing an Input

import { useRef } from 'react'
 
function InputFocus() {
  const inputRef = useRef(null)
 
  function handleClick() {
    inputRef.current.focus() // Access the DOM and focus
  }
 
  return (
    <div>
      <input ref={inputRef} placeholder="Type something" />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  )
}

Explanation:

• useRef(null): Creates a ref with an initial value of null.
• ref={inputRef}: Attaches the ref to the <input>. After rendering, inputRef.current becomes the actual DOM element.
• inputRef.current.focus(): Directly accesses the DOM and calls focus() to set the cursor inside the input field.

Result: Clicking the button focuses the input field.

How Refs Work

Creating a Ref:

const myRef = useRef(initialValue)

This creates an object { current: initialValue }.

• The current property holds the reference and can change without triggering a re-render.

Attaching to the DOM:

• The ref attribute in JSX assigns the DOM element to myRef.current when the component mounts.

Accessing the DOM:

• Use myRef.current to directly manipulate the DOM.

Important Notes

• Changing ref.current does not trigger a re-render, unlike state.
• myRef.current is only available after the component has rendered (avoid using it in the initial render).

Real-World Examples

1. Scrolling to a Specific Article

If you have a list of articles and want to scroll to a selected one:

import { useRef } from 'react'
 
function NewsList() {
  const articleRefs = useRef({}) // Store multiple refs
 
  const articles = [
    { id: 1, title: 'News 1' },
    { id: 2, title: 'News 2' },
  ]
 
  function handleScrollTo(id) {
    articleRefs.current[id].scrollIntoView({ behavior: 'smooth' })
  }
 
  return (
    <div>
      {articles.map((article) => (
        <div
          key={article.id}
          ref={(el) => (articleRefs.current[article.id] = el)} // Assign a ref to each article
        >
          <h2>{article.title}</h2>
          <button onClick={() => handleScrollTo(article.id)}>Scroll to</button>
        </div>
      ))}
    </div>
  )
}

Explanation:

• articleRefs.current: Stores references to <div> elements as an object (keys are article IDs).
• scrollIntoView: Smoothly scrolls to the selected article when clicking the button.

Result: Clicking the button scrolls to the corresponding article.

2. Measuring the Height of a Navbar

import { useRef, useEffect } from 'react'
 
function Navbar() {
  const navRef = useRef(null)
 
  useEffect(() => {
    console.log('Navbar height:', navRef.current.offsetHeight)
  }, [])
 
  return (
    <nav ref={navRef}>
      <h1>News Website</h1>
    </nav>
  )
}

Explanation:

• navRef.current.offsetHeight: Retrieves the height of <nav> after rendering.
• useEffect: Ensures the DOM is ready before accessing it.

Using Refs for Non-DOM Values

Refs can also store values that do not cause re-renders, such as a timer ID.

Example: Storing a Timeout ID

import { useRef } from 'react'
 
function Timer() {
  const timeoutRef = useRef(null)
 
  function startTimer() {
    timeoutRef.current = setTimeout(() => {
      alert("Time's up!")
    }, 2000)
  }
 
  function stopTimer() {
    clearTimeout(timeoutRef.current)
  }
 
  return (
    <div>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </div>
  )
}

Explanation:

• timeoutRef.current: Stores the timeout ID for later cancellation.
• Benefit: No need for state since the value does not require a re-render.

When to Use Refs?

✅ Use Refs When:

• Directly interacting with the DOM (focus, scroll, measure).
• Storing values that don’t trigger a re-render (timer IDs, library instances).

❌ Avoid Refs When:

• Managing UI state (use state instead).
• Updating values that affect rendering (use state instead).

Common Mistakes

❌ Accessing Refs Before the DOM is Ready

function Broken() {
  const ref = useRef(null)
  console.log(ref.current) // null (not rendered yet)
  return <div ref={ref}>Test</div>
}

✅ Fix: Use useEffect to access refs after rendering.

❌ Using Refs Instead of State

function Wrong() {
  const countRef = useRef(0)
  return <button onClick={() => countRef.current++}>{countRef.current}</button>
}

Problem: The UI does not update because refs do not trigger re-renders. ✅ Fix: Use useState instead.

Summary

Refs in React are a powerful tool for directly interacting with the DOM (e.g., focusing an input, scrolling) or storing values that don’t require re-renders (e.g., timer IDs). Use useRef to create refs, attach them to JSX via ref, and access them through current. Understanding refs helps you balance React’s declarative approach with imperative needs while keeping code clean and efficient.