✅ What is useRef Hook in React?

The useRef hook in React lets you persist values across renders without causing a re-render. Unlike useState, updating a ref does not trigger a component update. This makes useRef ideal for cases where you need to store mutable data or directly interact with the DOM while keeping renders efficient.
It is commonly used for accessing DOM elements (inputs, videos, divs) and for storing mutable values such as previous state, timers, or interval IDs.

🚀 Syntax

const reference = useRef(initialValue);
// Access or update with reference.current

The value stored in reference.current persists across renders and can be updated freely without re-rendering the component.

🧠 Key Concepts

Persistent value: Data stored in a ref survives re-renders.
No re-render: Updating ref.current does not cause the component to re-render.
DOM reference: Easily access and control DOM elements directly.

🔧 Example 1: Accessing a DOM Element

import React, { useRef } from "react";

export default function FocusInput() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Enter your name" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

Here, useRef is used to directly reference the input element and focus it programmatically when the button is clicked.

🔄 Example 2: Storing the Previous State

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

export default function PreviousValue() {
  const [count, setCount] = useState(0);
  const prevCount = useRef();

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

  return (
    <div>
      <p>Current Count: {count}</p>
      <p>Previous Count: {prevCount.current}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

This example shows how useRef can store the previous value of state without triggering extra renders.

✅ Best Practices

Use useRef for DOM manipulation and for values that do not affect UI rendering.
Avoid using useRef as a replacement for state—use useState when UI updates are required.
Ideal for storing interval IDs, timers, previous values, or third-party library instances.

📌 Common Use Cases

Focusing or selecting input fields.
Tracking previous values across renders.
Storing mutable values like counters or IDs.
Managing animations or timers without causing re-renders.

📚 useRef vs useState

useState: Manages reactive state and triggers re-renders when updated.
useRef: Stores persistent values and DOM references without re-rendering.

🧾 Conclusion

The useRef hook is a lightweight yet powerful feature in React for handling mutable values and interacting with the DOM efficiently. By using useRef appropriately, you can avoid unnecessary re-renders, write cleaner code, and build more responsive React components.

React useRef Hook Explained with Examples