Menggunakan React Refs dan Hook useRef

React menggunakan pendekatan deklaratif. Anda mengemas kini state, dan React mengemas kini UI. Ini berfungsi untuk kebanyakan tugasan.

Tetapi kadangkala anda perlu melangkah keluar daripada Virtual DOM. Anda mungkin perlu menyentuh elemen HTML sebenar secara terus. Di sinilah Refs dan hook useRef memainkan peranan.

Apakah itu Ref? Ref ialah penunjuk (pointer). Ia menghubungkan React secara terus kepada nod DOM asli.

Mengapa menggunakan useRef berbanding useState? Kemas kini state mencetuskan render semula (re-render). Ini bermakna React melukis semula komponen pada skrin. Kemas kini Ref tidak mencetuskan render semula. Ini menjadikannya sangat sesuai untuk nilai yang berubah tetapi tidak perlu dipaparkan dalam UI dengan serta-merta.

Kes penggunaan biasa: • Memfokuskan medan input secara automatik. • Mengawal elemen video atau audio (main/jeda). • Mengukur lebar atau tinggi sesuatu elemen. • Menyimpan ID pemasa untuk interval atau timeout.

Cara menggunakan useRef:

  1. Import useRef daripada React.
  2. Mulakan (Initialize) ia: const myRef = useRef(null).
  3. Sambungkan ia ke elemen: <input ref={myRef} />.
  4. Akses nilai melalui: myRef.current.

Contoh 1: Memfokuskan input secara automatik Apabila pengguna memasuki halaman, anda mahu kursor berada di dalam kotak teks. Anda menggunakan useEffect untuk memanggil myRef.current.focus() selepas komponen dimuatkan (mounts).

Contoh 2: Jam Randuk (Stopwatch) Jika anda menyimpan ID setInterval dalam state, komponen akan melakukan render semula setiap kali pemasa berdetik. Ini adalah perlahan. Jika anda menyimpan ID tersebut dalam ref, komponen akan kekal pantas. Nilai tersebut kekal selamat merentasi render tanpa menyebabkan kerja tambahan kepada pelayar (browser).

State vs Ref: • State: Mencetuskan render semula. Digunakan untuk data UI. Kemas kini adalah asinkronus (asynchronous). • Ref: Tiada render semula. Digunakan untuk akses DOM dan memori. Kemas kini adalah sinkronus (synchronous).

Tip Pro untuk Senior: • Elakkan penggunaan berlebihan. Gunakan ref hanya apabila logik deklaratif gagal. • Bersihkan memori. Sentiasa kosongkan (clear) interval atau pendengar acara (event listeners) dalam fungsi pembersihan (cleanup function) anda. • Jangan menulis ke dalam ref semasa rendering. Hanya kemas kini ref.current di dalam useEffect atau pengendali acara (event handlers). Ini dapat mengelakkan kesan sampingan (side effects). • Gunakan forwardRef. Jika anda ingin menghantar ref ke komponen anak tersuai (custom child component), anda mesti membungkus anak tersebut dengan React.forwardRef.

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