useRef Beyond DOM Refs

useRef Creates a Mutable Box

Most people think of useRef as "the thing you use to access DOM elements." That's only half the story. useRef(initialValue) returns { current: initialValue } — a plain object with one mutable property. This object persists for the full lifetime of the component. Changing .current does not trigger a re-render.

const ref = useRef(0);
ref.current = 42;  // No re-render
ref.current = 100; // No re-render
// The component function is NOT called again

This makes refs the perfect tool for values that need to persist across renders but are not part of the visual output.

Pattern 1: Previous Value Tracking

Ever needed "what was the value before this render?" Turns out, that's a ref pattern:

function usePrevious(value) {
  const ref = useRef();

  useEffect(() => {
    ref.current = value; // Update after render
  });

  return ref.current; // Return value from previous render
}

function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);

  return (
    <p>
      Current: {count}, Previous: {prevCount}
    </p>
  );
}

The timing is critical: ref.current is read during render (returning the old value), then updated in useEffect (which runs after render). On the next render, ref.current holds the previous render's value.

Pattern 2: Interval and Timer Management

function Stopwatch() {
  const [time, setTime] = useState(0);
  const [running, setRunning] = useState(false);
  const intervalRef = useRef(null);

  function start() {
    if (intervalRef.current) return; // Prevent multiple intervals
    setRunning(true);
    intervalRef.current = setInterval(() => {
      setTime(t => t + 1);
    }, 1000);
  }

  function stop() {
    setRunning(false);
    clearInterval(intervalRef.current);
    intervalRef.current = null;
  }

  function reset() {
    stop();
    setTime(0);
  }

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

  return (
    <div>
      <p>{time}s</p>
      <button onClick={running ? stop : start}>
        {running ? 'Stop' : 'Start'}
      </button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

The interval ID is stored in a ref because:

• It does not affect rendering
• It must persist across renders (start and stop are different events)
• State would cause unnecessary re-renders

Pattern 3: Render Count

function RenderCounter() {
  const renderCount = useRef(0);
  renderCount.current += 1;

  return <p>This component has rendered {renderCount.current} times</p>;
}

Using state for this would cause an infinite loop: setState triggers a render, which increments the count, which calls setState again. Refs break the loop because changing .current does not trigger a render.

Pattern 4: Stable Callback (Escape Hatch)

This one's a gem. When you need the latest version of a callback without adding it to effect dependencies:

function useLatestCallback(callback) {
  const ref = useRef(callback);

  useEffect(() => {
    ref.current = callback;
  });

  return useCallback((...args) => ref.current(...args), []);
}

// Usage: event handler that always sees latest state
function Chat({ roomId }) {
  const [messages, setMessages] = useState([]);

  const onMessage = useLatestCallback((message) => {
    setMessages(prev => [...prev, message]);
    // Can access latest roomId, messages, etc.
  });

  useEffect(() => {
    const connection = connectToRoom(roomId);
    connection.on('message', onMessage);
    return () => connection.off('message', onMessage);
  }, [roomId, onMessage]); // onMessage is stable — effect only re-runs when roomId changes
}

Pattern 5: Accessing the Imperative DOM

Beyond simple element references, refs enable complex DOM interactions:

function AutoScrollList({ items }) {
  const listRef = useRef(null);
  const prevItemsLength = useRef(items.length);

  useEffect(() => {
    // Auto-scroll only when new items are added
    if (items.length > prevItemsLength.current) {
      listRef.current.scrollTop = listRef.current.scrollHeight;
    }
    prevItemsLength.current = items.length;
  }, [items.length]);

  return (
    <ul ref={listRef} style={{ maxHeight: 300, overflow: 'auto' }}>
      {items.map(item => <li key={item.id}>{item.text}</li>)}
    </ul>
  );
}

Challenge: Build a usePreviousDistinct Hook

Challenge: Previous Distinct Value Tracker

// Build a hook that tracks the previous DISTINCT value.
// If the value does not change, previous should not update.
//
// Example:
// value: 1 → 1 → 2 → 2 → 3
// prev:  undefined → undefined → 1 → 1 → 2
//
// Note: usePrevious would give: undefined → 1 → 1 → 2 → 2

function usePreviousDistinct(value) {
  // Your implementation here
}

function usePreviousDistinct(value) {
  const prevRef = useRef();
  const currentRef = useRef(value);

  if (!Object.is(currentRef.current, value)) {
    prevRef.current = currentRef.current;
    currentRef.current = value;
  }

  return prevRef.current;
}