Tag: dom manipulation

Manipulating the DOM with useRef in React (Complete Guide with Examples)

When learning React, most developers use state and props to update the UI.

But sometimes, we need to directly access or manipulate a DOM element like:

  • Focusing an input
  • Playing a video
  • Scrolling to a section
  • Accessing element size

That’s where the useRef hook becomes very useful.

In this guide, you’ll learn:

  • What useRef is
  • Why we need it
  • How it manipulates the DOM
  • Best real-world examples
  • Common mistakes

What is useRef?

Simple Definition

useRef is a React hook that allows us to persist values and directly access DOM elements without re-rendering the component.

Syntax

const refName = useRef(initialValue);

How useRef Works

const inputRef = useRef(null);

React creates an object like:

{
  current: null
}

When attached to an element:

<input ref={inputRef} />

inputRef.current now points to the actual DOM element.

Why Do We Need useRef?

Normally in React:

✅ UI updates through state

But sometimes we need:

  • Direct DOM access
  • Performance optimization
  • Persistent values without re-render

👉 useRef solves this.

Example 1: Focus Input Automatically

One of the most common use cases.

Code

import { useRef } from "react";

function App() {

   const inputRef = useRef(null);

   const focusInput = () => {
    inputRef.current.focus();
   }; 
 
return ( 
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>
        Focus Input
      </button>
    </div>
  );
}

export default App;

How It Works ?

Step 1

const inputRef = useRef(null);

Creates reference object.

Step 2

<input ref={inputRef} />

Connects DOM element to ref.

Step 3

inputRef.current.focus();

Directly accesses DOM element and focuses input.

Example 2: Change Background Color

Code

import { useRef } from "react";

function App() {

  const boxRef = useRef(null);

  const changeColor = () => {
    boxRef.current.style.backgroundColor = "blue";
  };

  return (
    <div>
      <div
        ref={boxRef}
        style={{
          width: "200px",
          height: "200px",
          background: "gray"
        }}
      />      
     <button onClick={changeColor}>
        Change Color
      </button>
    </div>
  );
}

Example 3: Auto Scroll to Section

Very useful in landing pages.

Code

import { useRef } from "react";

function App() {

  const sectionRef = useRef(null);

  const scrollToSection = () => {
    sectionRef.current.scrollIntoView({
      behavior: "smooth"
    });
  };

  return (
    <div>
      <button onClick={scrollToSection}>
        Go to Section
      </button>
      <div style={{ height: "100vh" }} />
      <div ref={sectionRef}>
        Target Section
      </div>
    </div>
  );
}

Example 4: Video Play/Pause Control

Code

import { useRef } from "react";

function App() {
  
const videoRef = useRef(null);

  return (
    <div>
      <video
        ref={videoRef}
        width="400"
        src="video.mp4"
      /> 
      <button onClick={() => videoRef.current.play()}>
        Play
      </button>
      <button onClick={() => videoRef.current.pause()}>
        Pause
      </button>
    </div>
  );
}

Example 5: Store Previous Value Without Re-render

Code

import { useEffect, useRef, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const previousCount = useRef(0);

  useEffect(() => {
    previousCount.current = count;
  }, [count]);

  return (
    <div>
      <h2>Current: {count}</h2>
      <h2>Previous: {previousCount.current}</h2> 
     <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Important Difference: useRef vs useState

FeatureuseRefuseState
Causes re-render❌ No✅ Yes
Stores value✅ Yes✅ Yes
Access DOM✅ Yes❌ No

Best Use Cases of useRef

Use useRef for:

✅ DOM access
✅ Focus management
✅ Scroll handling
✅ Timers
✅ Storing mutable values

Common Mistakes

❌ Manipulating DOM Too Much

React prefers declarative UI.

👉 Don’t overuse direct DOM manipulation.

❌ Accessing .current Before Render

console.log(ref.current);

May be null initially.

❌ Using useRef Instead of State

If UI must update → use state.

Interview Question

❓ What is useRef in React?

👉 Answer:

useRef is a hook used to persist values across renders and directly access DOM elements without causing re-renders.

Final Summary

  • useRef gives direct DOM access
  • Does not trigger re-render
  • Useful for focus, scroll, video control, timers
  • Should be used carefully
💡 Found this helpful? Subscribe for simple React guides, real-world examples, and interview preparation tips. Happy Coding!