Ποιες είναι οι κύριες περιπτώσεις χρήσης του useRef;

Question

Accepted Answer

`useRef` επιστρέφει ένα μεταβλητό κοντέινερ `{ current: ... }` που **παραμένει σε όλες τις αναδρομές** αλλά, σημαντικά, **η αλλαγή του ΔΕΝ ενεργοποιεί ανανέωση**. Δύο ξεχωριστές χρήσεις:

## 1. Πρόσβαση σε έναν κόμβο DOM

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

## 2. Διατήρηση μιας μεταβλητής τιμής μεταξύ αναδρομών

Χρησιμοποιήστε το για να θυμηθείτε κάτι χωρίς να προκαλέσετε αναδρομές — αναγνωριστικά χρονομέτρων, την προηγούμενη τιμή ενός prop, ένα στιγμιότυπο μιας βιβλιοθήκης:

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

## Η βασική διάκριση: ref έναντι 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
```

Από εδώ το κανόνας είναι: **εάν η διεπαφή χρήστη πρέπει να αντικατοπτρίζει την τιμή, χρησιμοποιήστε state· εάν είναι απλώς δεδομένα "πίσω από τα παρασκήνια", χρησιμοποιήστε ένα ref.** Η ανάγνωση/εγγραφή `ref.current` κατά τη διάρκεια της αναδρομής δεν συνιστάται (κάντε το σε effects/handlers) επειδή τα refs δεν παρακολουθούνται από τον κύκλο αναδρομής του React.