useRef & DOM access — React Deep Dive

useRef: a box that survives renders

useRef(initialValue) returns {'{ current: initialValue }'}. The .current property is mutable and persists across every re-render — but writing to it schedules no re-render. That is the whole point: refs are how you reach outside React's reactive model. Two faces — attach one to a JSX node to grab the live DOM element, or use it as a mutable instance slot (timer id, previous value) that should never by itself repaint the screen.

piece	role	re-renders?
`useRef(x)`	returns `{'{ current: x }'}`; same object identity every render	declaring it: no
`ref={myRef}`	attach to a JSX node; React assigns the live DOM node to `myRef.current` after mount	no — just wiring
`myRef.current.focus()`	direct DOM API on the node — no `querySelector`	no (unless you call setState)
`myRef.current = X`	mutate the box directly (store a timer id, previous value)	never — read at access time, not snapshotted

1 · the refs you write (edit me)

var RefDemo = function () {
  // 1 · DOM ref — points at the <input> node after mount
  var inputRef = React.useRef(null);
  var widthState = React.useState(0);
  var width = widthState[0];
  var setWidth = widthState[1];

  // 2 · instance-value ref — holds the setInterval() id (no re-render needed)
  var intervalRef = React.useRef(null);
  var runState = React.useState(false);
  var running = runState[0];
  var setRunning = runState[1];
  var elState = React.useState(0);
  var elapsed = elState[0];
  var setElapsed = elState[1];

  // 3 · previous-value ref — persists across renders, mutates silently
  var prevRef = React.useRef(0);
  var cntState = React.useState(0);
  var count = cntState[0];
  var setCount = cntState[1];

  // effect runs AFTER commit, so prevRef lags one render behind count
  React.useEffect(function () {
    prevRef.current = count;
  }, [count]);

  var start = function () {
    if (running) return;
    setRunning(true);
    intervalRef.current = setInterval(function () {
      setElapsed(function (e) { return e + 1; });
    }, 1000);
  };
  var stop = function () {
    setRunning(false);
    if (intervalRef.current) {
      clearInterval(intervalRef.current);  // read the id back out of the ref
      intervalRef.current = null;
    }
  };

  // refs are NOT auto-cleaned — clear the timer ourselves on unmount
  React.useEffect(function () {
    return function () {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, []);

  return (
    <div className="max-w-sm mx-auto p-5 bg-[#161b22] rounded-xl border border-[#30363d]">
      <h2 className="text-lg font-bold text-[#61dafb] mb-3">useRef — two faces</h2>

      {/* 1 · DOM access */}
      <div className="mb-4 p-3 bg-[#0d1117] rounded border border-[#30363d]">
        <p className="text-[11px] text-[#8b949e] mb-2 uppercase tracking-wide">1 · DOM access (ref -> node)</p>
        <input
          data-testid="input"
          ref={inputRef}
          className="w-full px-3 py-2 bg-[#0d1117] border border-[#30363d] rounded text-[#e6edf3] text-sm outline-none"
          placeholder="click Focus, then Measure"
        />
        <div className="mt-2 flex gap-2">
          <button
            data-testid="focus"
            className="px-3 py-1.5 bg-[#61dafb] text-[#0d1117] rounded font-bold text-xs"
            onClick={function () { inputRef.current.focus(); }}
          >
            Focus Input
          </button>
          <button
            data-testid="measure"
            className="px-3 py-1.5 border border-[#61dafb] text-[#61dafb] rounded text-xs font-bold"
            onClick={function () { setWidth(inputRef.current.offsetWidth); }}
          >
            Measure Width
          </button>
        </div>
        <p className="mt-2 text-xs text-[#8b949e]">
          width: <span data-testid="width" className="text-[#61dafb]">{width}</span>px
        </p>
      </div>

      {/* 2 · stopwatch (interval id lives in a ref) */}
      <div className="mb-4 p-3 bg-[#0d1117] rounded border border-[#30363d]">
        <p className="text-[11px] text-[#8b949e] mb-2 uppercase tracking-wide">2 · instance value (timer id in ref)</p>
        <p data-testid="elapsed" className="text-2xl font-bold text-[#61dafb]">{elapsed}s</p>
        <div className="mt-2 flex gap-2">
          <button
            data-testid="start"
            className="px-3 py-1.5 bg-[#61dafb] text-[#0d1117] rounded font-bold text-xs"
            onClick={start}
          >
            {running ? 'running…' : 'start'}
          </button>
          <button
            data-testid="stop"
            className="px-3 py-1.5 border border-[#e74c3c] text-[#e74c3c] rounded text-xs font-bold"
            onClick={stop}
          >
            stop
          </button>
        </div>
      </div>

      {/* 3 · previous value (ref persists, no re-render) */}
      <div className="p-3 bg-[#0d1117] rounded border border-[#30363d]">
        <p className="text-[11px] text-[#8b949e] mb-2 uppercase tracking-wide">3 · previous value (ref lags one render)</p>
        <p className="text-sm text-[#e6edf3]">
          Current: <span data-testid="count" className="text-[#61dafb]">{count}</span>
          {' '}· Previous: <span data-testid="prev" className="text-[#61dafb]">{prevRef.current}</span>
        </p>
        <button
          data-testid="increment"
          className="mt-2 px-3 py-1.5 bg-[#61dafb] text-[#0d1117] rounded font-bold text-xs"
          onClick={function () { setCount(function (c) { return c + 1; }); }}
        >
          Increment
        </button>
      </div>
    </div>
  );
};

createRoot(document.getElementById('root')).render(<RefDemo/>);

2 · Babel compiles JSX → element tree

<RefDemo/> becomes React.createElement(RefDemo). ref={inputRef} compiles to a ref prop — React reads it, finds the node, and assigns inputRef.current = node right after mount.

// (hit "compile & render" to see Babel's output)

3 · live React (both ref faces, proven)

Click Focus Input to call inputRef.current.focus() on the node. Click Measure Width to read inputRef.current.offsetWidth. Click Increment — the prevRef ref lags one render, so Previous shows the value from before the click. The gold-check runs all three automatically below.

focus: — · count: — · prev: — · gold: focus → measure(width>0) → increment(count 1, prev 0)

intent → pattern

intent	pattern	why
focus / scroll / select	`inputRef.current.focus()`	imperative DOM call — no `querySelector`, works with the exact node
measure a node	`inputRef.current.offsetWidth`	read layout synchronously; wrap in `useLayoutEffect` to avoid flicker
store a timer id	`intervalRef.current = setInterval(...)`	persists across renders without causing them; `clearInterval` on unmount
previous value	`prevRef` + `useEffect` set after commit	ref lags one render → shows the value from before the latest state change
integrate non-React lib	pass `ref.current` inside `useEffect`	hand the mounted node to the library once; tear down in the cleanup return