กรณีการใช้งานหลักของ useRef มีอะไรบ้าง?

Question

Accepted Answer

`useRef` ส่งคืนคอนเทนเนอร์ที่เปลี่ยนแปลงได้ `{ current: ... }` ซึ่ง **คงอยู่ระหว่าง render** แต่สิ่งสำคัญคือ **การเปลี่ยนแปลงจะไม่ทำให้เกิด re-render** มีการใช้งานที่แตกต่างกันสองแบบ:

## 1. เข้าถึงโหนด DOM

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

## 2. ค้างไว้ค่าที่เปลี่ยนแปลงได้ระหว่าง render

ใช้เพื่อจำสิ่งใดสิ่งหนึ่งโดยไม่ทำให้เกิด render — timer ids, ค่าก่อนหน้าของ prop, instance ของไลบรารี:

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

## ความแตกต่างที่สำคัญ: 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
```

ดังนั้นกฎคือ: **หาก UI ควรสะท้อนค่า ให้ใช้ state; หากเป็นเพียงข้อมูล "เบื้องหลัง" ให้ใช้ ref** การอ่าน/เขียน `ref.current` ระหว่าง render นั้นไม่แนะนำ (ทำใน effects/handlers) เพราะ refs ไม่ได้ถูกติดตามโดยวงจร render ของ React