React useRef Hook

The useRef Hook in React is a powerful tool that gives you a way to persist values without causing re-renders and to access DOM elements directly.

const myRef = useRef(initialValue);

The useRef Hook returns a mutable object (ref) with a .current property that you can update.

myRef.current = newValue;

The key feature: changing .current does not cause the component to re-render.

When Should You Use useRef?

• ✅ To access a DOM element directly (like an input field)
• ✅ To persist values between renders without re-rendering
• ✅ To keep track of previous values
• ✅ To store timers, IDs, or any mutable object

Example 1: Accessing the DOM

Let’s use useRef to focus an input field when a button is clicked.

import { useRef } from "react";
 
function InputFocus() {
  const inputRef = useRef(null);
 
  const handleClick = () => {
    inputRef.current.focus(); // 👈 Direct DOM access
  };
 
  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </>
  );
}
 

What’s Happening?

• inputRef is a reference to the <input> DOM node.
• Clicking the button triggers inputRef.current.focus(), which focuses the input.

Example 2: Persisting Values Without Re-rendering

Sometimes, you need to store a value that doesn't trigger a render when changed.

import { useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom/client";
 
function Timer() {
  const [count, setCount] = useState(0);
  const countRef = useRef(0); 
 
  useEffect(() => {
    const interval = setInterval(() => {
      countRef.current += 1; 
      console.log("Count (ref):", countRef.current);
    }, 1000);
 
    return () => clearInterval(interval);
  }, []);
 
  return (
    <>
      <p>Component state: {count}</p>
      <button onClick={() => setCount(count + 1)}>Update State</button>
    </>
  );
}

What’s the Benefit?

• countRef updates every second, but the component does not re-render.
• You can still interact with the UI using state (setCount), but heavy logic uses refs.

Important Notes

• Refs do not trigger a re-render when updated.
• Avoid using refs to replace state unnecessarily.
• Perfect for timeouts, intervals, focus, and caching values.

Summary

React’s useRef is often underrated but extremely useful in the right scenarios. It's a reliable way to:

• Work with DOM elements
• Persist data across renders
• Handle mutable values efficiently