Apa kae panggunaan utama saka useRef?

Question

Accepted Answer

`useRef` mbaleni sawijining wadah sing bisa dirubah `{ current: ... }` sing **tetep ana ing saindhenging render** nanging, sing paling penting, **rubah iku ORA micu render maneh**. Rong panggunaan sing beda:

## 1. Akses sawijining node DOM

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

## 2. Nyimpan nilai sing bisa dirubah ing antarane render

Gunakake kanggo eling-eleng sewengi tanpa nyebabake render — timer ids, nilai sadurunge saka prop, sawijining instance saka library:

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

## Pembedaan utama: ref vs state

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

Dadi aturane: **yen UI kudu nggambaraake nilaine, gunakake state; yen mung "konco tiptop" data, gunakake ref.** Maca/nulis `ref.current` sajrone render ora disaranake (lakokake ing effects/handlers) amarga refs ora dilacak dening render cycle React.