useRef vs useState — dlaczego ref nie renderuje?

State przechowuje dane wpływające na widok, a jego setter planuje aktualizację UI. Ref przechowuje wartość między renderami, ale zmiana current nie wywołuje renderowania.

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

Praktyka: ref przydaje się do elementów DOM i uchwytów timerów.

Pułapka: licznik wyświetlany w UI nie powinien polegać wyłącznie na ref. Nie odczytuję i nie zmieniam arbitralnie ref podczas renderowania.