Menggunakan React Refs dan Hook useRef

React menggunakan pendekatan deklaratif. Anda memperbarui state, dan React memperbarui UI. Ini berfungsi untuk sebagian besar tugas.

Namun terkadang Anda perlu keluar dari Virtual DOM. Anda mungkin perlu menyentuh elemen HTML asli secara langsung. Di sinilah Refs dan hook useRef berperan.

Apa itu Ref? Ref adalah sebuah pointer. Ia menghubungkan React secara langsung ke node DOM asli.

Mengapa menggunakan useRef alih-alih useState? Pembaruan state memicu re-render. Ini berarti React menggambar ulang komponen di layar. Pembaruan Ref tidak memicu re-render. Hal ini membuatnya sempurna untuk nilai yang berubah tetapi tidak perlu ditampilkan di UI secara langsung.

Kasus penggunaan umum: • Memfokuskan bidang input secara otomatis. • Mengontrol elemen video atau audio (play/pause). • Mengukur lebar atau tinggi sebuah elemen. • Menyimpan ID timer untuk interval atau timeout.

Cara menggunakan useRef:

  1. Impor useRef dari React.
  2. Inisialisasi: const myRef = useRef(null).
  3. Pasangkan ke elemen: <input ref={myRef} />.
  4. Akses nilainya melalui: myRef.current.

Contoh 1: Auto-focus pada input Saat pengguna memasuki halaman, Anda ingin kursor berada di kotak teks. Anda menggunakan useEffect untuk memanggil myRef.current.focus() setelah komponen mount.

Contoh 2: Stopwatch Jika Anda menyimpan ID setInterval di dalam state, komponen akan melakukan re-render setiap kali timer berdetak. Ini lambat. Jika Anda menyimpan ID tersebut di dalam ref, komponen akan tetap cepat. Nilainya tetap aman di seluruh render tanpa menyebabkan beban kerja tambahan bagi browser.

State vs Ref: • State: Memicu re-render. Digunakan untuk data UI. Pembaruan bersifat asinkron. • Ref: Tidak ada re-render. Digunakan untuk akses DOM dan memori. Pembaruan bersifat sinkron.

Tips Pro untuk Senior: • Hindari penggunaan berlebihan. Gunakan ref hanya ketika logika deklaratif tidak memadai. • Bersihkan memori. Selalu hapus interval atau event listener di dalam fungsi cleanup Anda. • Jangan menulis ke ref selama proses rendering. Hanya perbarui ref.current di dalam useEffect atau event handler. Ini mencegah side effects. • Gunakan forwardRef. Jika Anda ingin meneruskan ref ke komponen anak kustom, Anda harus membungkus anak tersebut dengan React.forwardRef.

Sumber: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde