Je! Kuna matumizi gani makuu ya useRef?

useRef inajenga kontena yanayoweza kubadilika { current: ... } inayobaki katika maboresho lakini, muhimu sana, kuibadilisha HAISEMI hadisi mpya. Matumizi mawili tofauti:

1. Kupata nodi ya DOM

function SearchBox() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus(); // imperatively focus the input on mount
  }, []);
  return <input ref={inputRef} />;
}

2. Shikilia thamani yanayoweza kubadilika katika maboresho

Itumie ili kukumbuka kitu bila kusababisha maboresho — timer ids, thamani ya awali ya prop, mfano wa maktaba:

function Timer() {
  const intervalId = useRef(null);
  const start = () => {
    intervalId.current = setInterval(tick, 1000); // store across renders
  };
  const stop = () => clearInterval(intervalId.current);
}

Tofauti muhimu: ref vs state

const countRef = useRef(0);
countRef.current++;  // changes the value, but the UI does NOT update

const [count, setCount] = useState(0);
setCount(count + 1); // changes value AND re-renders

Kwa hiyo sheria ni: ikiwa UI inapaswa kuonyesha thamani, tumia state; ikiwa ni data tu "nyuma ya kulisanisha", tumia ref. Kusoma/kuandika ref.current wakati wa kujenga kunakosezwa (fanya kwa athari/madereva) kwa sababu refs hazienezi na chetani cha kujenga kwa React.