useRef vs useState — why doesn't a ref trigger a render?

State holds data that affects the view, and its setter schedules a UI update. A ref keeps a value between renders, but changing current doesn't trigger a render.

import { useRef } from 'react';
export default function FocusInput() {
  const inputRef = useRef(null);
  return <>
    <input ref={inputRef} aria-label="Name" />
    <button onClick={() => inputRef.current?.focus()}>Focus</button>
  </>;
}

In practice: refs are handy for DOM elements and timer handles.

Pitfall: a counter shown in the UI shouldn't rely on a ref alone. I don't read or change refs arbitrarily during rendering.