React: useRef and DOM Manipulation

Last updated: 2026-10-26

useRef It’s like a safe—you can store anything inside, and it will still be there when you take it out. Unlike useState, changing ref’s value will not trigger the component to re-render.

1. What You'll Learn

• Basic Usage of useRef (DOM References)
• useRef stores mutable values (without triggering a re-render)
• forwardRef: Passes a ref to a child component
• useImperativeHandle exposes child component methods
• Choosing Between useRef and useState

2. The Story of a Search Bar

The Two Main Uses of useRef

flowchart LR
    subgraph "Uses1: DOMQuote"
        A[useRef] --> B["ref={inputRef}"]
        B --> C["inputRef.current.focus()"]
    end
    
    subgraph "Uses2: Variable-Value Storage"
        D[useRef] --> E[".current = value]
        E --> F[Does not trigger a repaint]
    end
    
    G[forwardRef] --> H[Passed from the parent componentref]
    H --> I[Child Component ExposureDOM]
    
    style A fill:#e3f2fd,stroke:#1565c0
    style D fill:#e8f5e9,stroke:#2e7d32
    style G fill:#fff3e0,stroke:#e65100

flowchart LR
    subgraph "Uses1: DOMQuote"
        A[useRef] --> B["ref={inputRef}"]
        B --> C["inputRef.current.focus()"]
    end
    
    subgraph "Uses2: Variable-Value Storage"
        D[useRef] --> E[".current = value]
        E --> F[Does not trigger a repaint]
    end
    
    G[forwardRef] --> H[Passed from the parent componentref]
    H --> I[Child Component ExposureDOM]
    
    style A fill:#e3f2fd,stroke:#1565c0
    style D fill:#e8f5e9,stroke:#2e7d32
    style G fill:#fff3e0,stroke:#e65100

(1) Pain Point: Focusing on an input field requires manipulating the DOM

Bob created a search page and wanted the page to automatically focus on the search box when it loads:

Bob wants to use useState to implement:

(2) A Solution Using useRef

Output:

Buttons: Select All Text, Scroll to the bottom, Measure the height. Input: Autofocus input field. side effects via useEffect. DOM ref via useRef

Benefits: useRef returns a mutable object { current: null }, and .current is a real DOM element. No selectors or getElementById are needed—it’s naturally React-friendly.

3. Two Core Uses of useRef

(1) Use Case 1: DOM References

The most common uses—retrieving DOM elements, manipulating focus, size, scroll position, and so on.

▶ Example: 5 Common DOM Operations

Output:

Autofocus input, "Select All Text" button, scrollable 20-row list with "Scroll to bottom", box with "Measure the height" → shows px value

(2) Use Case 2: Storing variable values (without triggering a redraw)

This is useRef’s hidden trick—it stores any value, and the component won’t re-render when that value changes.

4. useRef vs. useState

Output:

Displays: "DOM Example of Operation". Buttons: Select All Text, Scroll to the bottom, Measure the height. Input: Autofocus input field. useEffect manages side effects. useRef references DOM/variable

▶ Example: Using useRef to save the previous value

Output:

Currently: 0, Last time: (first time). Click +1 → Currently: 1, Last time: 0. Each click shows current and previous value.

5. forwardRef: Parent Components Control the DOM of Child Components

By default, function components do not expose their own DOM references. Using forwardRef allows child components to receive the parent component's ref:

6. useImperativeHandle: Expose a specific method

If you don't want to expose the entire DOM element, use useImperativeHandle to expose only specific methods:

7. Complete Example: Rich Text Editor

Output:

State: count (setter: setCount). Button: setCount(c => c + 1)}>+1. useEffect manages side effects. useRef references DOM/variable

Expected Output: A rich-text editor that supports bold, italics, underline, lists, H2 headings, and other formatting options; content can be saved, loaded, or cleared externally via a ref.

▶ Example 3: Using useRef to Close a Pop-up Window When Clicked from Outside

Output:

"Menu ▾" button → dropdown (Profile, Settings, Logout). Click outside → closes automatically via useClickOutside hook.

Output:

Throttled button: rapid clicks ignored (1 per second max). Click counter + "Throttled!" feedback. useRef stores lastClick timestamp

▶ Example 4: Using useRef to Store a Timer for Implementing a Throttled Button

Output:

Click → "Clicked!" + count. Click again within 1s → "Too fast! Wait 1 second." (red). Throttled via useRef timestamp.

Output:

Displays: "Click Me". State: clicks (setter: setClicks), feedback (setter: setFeedback). Button: Click Me. useRef references DOM/variable. Timer-based behavior

▶ Example 5: Using forwardRef to wrap a focusable Input component

const FancyInput = React.forwardRef(function FancyInput({ label, error, ...props }, ref) {
  const internalRef = useRef(null)

  useImperativeHandle(ref, () => ({
    focus: () => internalRef.current?.focus(),
    selectAll: () => {
      const el = internalRef.current
      if (el) { el.focus(); el.select() }
    },
    scrollIntoView: () => internalRef.current?.scrollIntoView({ behavior: 'smooth' }),
  }))

  return (
    <div style={{ marginBottom: 12 }}>
      <label style={{ display: 'block', marginBottom: 4, fontSize: 14, fontWeight: 500 }}>{label}</label>
      <input
        ref={internalRef}
        style={{ width: '100%', padding: 8, borderRadius: 4, border: `1px solid ${error ? '#ff4d4f' : '#d9d9d9'}`, outline: 'none' }}
        {...props}
      />
      {error && <p style={{ color: '#ff4d4f', fontSize: 12, margin: '4px 0 0' }}>{error}</p>}
    </div>
  )
})

function FormWithFancyInput() {
  const emailRef = useRef(null)

  function handleSubmit(e) {
    e.preventDefault()
    emailRef.current?.focus()
  }

  return (
    <form onSubmit={handleSubmit} style={{ maxWidth: 400, margin: '0 auto' }}>
      <h3>Sign Up</h3>
      <FancyInput ref={emailRef} label="Email" type="email" placeholder="you@example.com" />
      <FancyInput label="Password" type="password" placeholder="At least 6 characters" />
      <button type="submit" style={{ padding: '8px 24px', cursor: 'pointer' }}>Submit</button>
    </form>
  )
}

Output:

Sign up form: labeled Email & Password inputs with error styling. Submit focuses email. Exposes focus(), selectAll(), scrollIntoView().

❓ FAQ

📖 Summary

• useRef returns to { current: initialValue }; changing .current does not trigger a re-render
• Two uses: ① DOM references (focus, size, scroll) ② Storing variable values (timer ID, previous value)
• forwardRef: Allowing a parent component to control a child component's DOM via a ref
• useImperativeHandle: A method for limiting exposure by providing only the APIs needed by the parent component
• Always check for null before operating on ref: ref.current?.focus()

📝 Exercises

1. Basic Exercise (Difficulty ⭐): Create a AutoFocusInput component that automatically receives focus when mounted, and provide two methods—focus() and clear()—for the parent component to call.
2. Advanced Exercise (Difficulty ⭐⭐): Create a ClickCounter component, use useRef to track the number of clicks (without displaying it in the UI), and use useEffect to log "Clicked X times" to the console on every render.
3. Challenge (Difficulty: ⭐⭐⭐): Create a InfiniteScroll component that uses useRef to listen for the sentinel element (a specific element at the bottom of the page) entering the viewport, triggering the loading of more data. Use the IntersectionObserver API.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us