Kaj so glavne primere uporabe za useRef?

Question

IT Interview Practice · Accepted Answer

`useRef` vrne spremenljiv vsebnik `{ current: ... }`, ki se **ohranja med renderiranji**, a se kritično **spreminjanje tega NE sproži ponovnega renderiranja**. Dva distinktna primera uporabe:

## 1. Dostop do DOM vozlišča

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

## 2. Shranjevanje spremenljive vrednosti med renderiranji

Uporabite ga za zapamtovanje česa brez sprožitve renderiranj — timer id-je, prejšnjo vrednost svojstva, instanco knjižnice:

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

## Ključna razlika: ref v primerjavi s stanjem

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

Torej pravilo je: **če bi morala UI odražati vrednost, uporabite stanje; če gre zgolj za "zakulisne" podatke, uporabite ref.** Branje/pisanje `ref.current` med renderiranjem je odsvetovano (to naredite v efektih/upravljalcih), ker refji niso sledeni v React-ovem ciklu renderiranja.

1. Dostop do DOM vozlišča

2. Shranjevanje spremenljive vrednosti med renderiranji

Ključna razlika: ref v primerjavi s stanjem

Povezana vprašanja