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

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!