useRef ne işe yarar? useState'ten farkı nedir?

useRef, render'lar arasında korunan, değiştirildiğinde yeniden render tetiklemeyen bir kutu ({ current }) döndürür.

Kullanım alanları:

• DOM elemanına erişmek (focus, ölçüm, scroll)
• Render'ı etkilemeyen değerleri saklamak: timer id, önceki değer, abonelik
• Stale closure sorunlarında en güncel değere erişmek

function AramaKutusu() {
  const inputRef = useRef(null);
  const timerRef = useRef();

  useEffect(() => inputRef.current.focus(), []);

  const yazildi = (e) => {
    clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => ara(e.target.value), 300);
  };
  return <input ref={inputRef} onChange={yazildi} />;
}

Kural: ekranda gösterilen değer state, gösterilmeyen yardımcı değer ref'tir.