useRef'in ana kullanım durumları nelerdir?

Question

IT Interview Practice · Accepted Answer

`useRef` değiştirilebilir bir kapsayıcı `{ current: ... }` döndürür, bu da **render'lar arasında kalıcı** olur ama, önemli olan, **bunu değiştirmek yeniden render'ı tetiklemez**. İki farklı kullanım:

## 1. Bir DOM düğümüne erişin

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

## 2. Render'lar arasında değiştirilebilir bir değeri tutun

Render'lar etkinleştirmeden bir şeyi hatırlamak için kullanın — timer id'leri, bir prop'un önceki değeri, bir kütüphanenin örneği:

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

## Neden önemli

```jsx
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
```

Böylece kural şudur: **UI değeri yansıtmalıysa, state kullanın; sadece "sahne arkası" veriyse, ref kullanın.** Render sırasında `ref.current` okumak/yazmak önerilmez (effects/handlers'da yapın) çünkü ref'ler React'in render döngüsü tarafından izlenmez.

1. Bir DOM düğümüne erişin

2. Render'lar arasında değiştirilebilir bir değeri tutun

Neden önemli

İlgili sorular