useRef

useRef: Mutable References & Direct DOM Access

The useRef hook returns a mutable ref object whose .current property is initialized to the passed argument.

useRef serves two distinct purposes in React:

1. Accessing Native DOM Elements: Imperatively focus input elements, measure DOM dimensions, or trigger media playback.
2. Storing Mutable Class-like Instance Variables: Persist values across component re-renders without triggering a re-render when the value changes.

State vs Ref Comparison

Practical Code Examples

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

export default function RefDemo() {
  // 1. DOM Reference for Input Focus
  const inputRef = useRef(null);

  // 2. Mutable Reference for Storing Timer ID (Does not trigger re-renders)
  const timerRef = useRef(null);
  const [seconds, setSeconds] = useState(0);

  const handleFocus = () => {
    // Access native HTML input DOM node directly
    inputRef.current?.focus();
  };

  const startTimer = () => {
    if (timerRef.current !== null) return;
    timerRef.current = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);
  };

  const stopTimer = () => {
    clearInterval(timerRef.current);
    timerRef.current = null;
  };

  useEffect(() => {
    return () => clearInterval(timerRef.current); // Cleanup timer on unmount
  }, []);

  return (
    <div className="card">
      <h3>DOM Ref Focus Example</h3>
      <input ref={inputRef} type="text" placeholder="Click button to focus..." />
      <button onClick={handleFocus}>Focus Input Field</button>

      <hr />

      <h3>Timer Ref: {seconds}s</h3>
      <button onClick={startTimer}>Start Timer</button>
      <button onClick={stopTimer}>Stop Timer</button>
    </div>
  );
}

Best Practices & Gotchas

• Do Not Read/Write ref.current During Render: Avoid mutating or reading ref.current inside the component JSX rendering body. Perform ref mutations only inside useEffect or event handlers.
• Refs Are Persistent Containers: Unlike local variables, ref objects persist for the entire lifespan of the component instance.

Self-Check Challenge

Write a component using useRef that counts how many times the component has rendered without triggering additional renders.