useRef vs useState

useState dan useRef sama-sama bisa menyimpan nilai di antara render, tapi keduanya dipakai untuk tujuan yang berbeda. Kuncinya ada di satu pertanyaan: apakah perubahan nilai itu perlu memicu re-render atau tidak?

useState dipakai untuk nilai yang, ketika berubah, tampilannya harus ikut berubah. Setiap kali kita panggil setter-nya, React bakal re-render komponen supaya UI-nya sesuai dengan state terbaru.

const [count, setCount] = useState(0);
// setCount(1) → komponen re-render, angka di layar ikut berubah

useRef dipakai untuk nilai yang perlu kita simpan, tapi tidak ada hubungannya dengan tampilan. Mengubah ref.current tidak memicu re-render sama sekali.

const renderCount = useRef(0);
renderCount.current += 1; // aman, tidak bikin re-render

Nah, kapan useRef berguna? Beberapa kasus yang sering muncul:

• Menyimpan referensi ke elemen DOM, misal <input ref={inputRef} /> supaya bisa inputRef.current.focus().
• Menyimpan id dari setTimeout atau setInterval supaya bisa di-clearTimeout nanti.
• Menyimpan nilai sebelumnya tanpa memicu render tambahan.

Aturan gampangnya begini. Bila nilainya muncul di layar dan bisa berubah, pakai useState. Bila nilainya cuma dipakai di balik layar dan kamu tidak mau UI ikut ke-render ulang tiap kali berubah, pakai useRef.

Satu jebakan yang sering kejadian, jangan baca atau tulis ref.current saat proses render berlangsung. Akses ref di dalam event handler atau useEffect saja, bukan langsung di badan komponen, karena hasilnya bisa tidak konsisten.