React Hooks: useRef()

useRef umunnya digunakan untuk mengakses DOM node dalam sebuah komponen. Return dari useRef hooks adalah sebuah objek dengan property current.

Contoh: Misal kita mau mengakses element input, maka kita bisa menambahkan ref ke element inputnya.

Maksud dari kode diatas adalah, untuk membuat element input focus, begitu komponenya di render pertama kali.

Contoh lainnya:

Maksud kode di atas adalah, setelah kita mengisi inputan email, kemudian kita cek nilai inputannya dengan klik tombol Check Email Value maka di console akan tampil nilai email dan ref nya sama sesuai inputan.

Setelah itu, jika kita klik tombol Remove Value maka kolom inputan akan kembali kosong sesuai default nilai yang kita set pertama kali, tetapi jika kita cek lagi nilai email dan ref nya dengan klik tombol Check Email Value maka di console akan tampil nilai email masih tetap, sedangkan nilai ref nya menjadi kosong.

Begitu juga saat kita klik tombol Set Email, lalu klik klik tombol Check Email Value maka di console akan tampil nilai emailnya tetap (tidak berubah) tetapi nilai refnya berubah sesuai dengan default nilai yaitu erdecode@gmail.com.

Selain untuk mengakses dom node, useRef juga bisa digunakan mirip seperti useState.

Contoh:

Kalau kita menggunakan state sebagai data untuk komponen, setiap terjadi update state maka komponen tersebut akan dirender ulang.

Nah, gimana kalau kita gak mau komponennya itu dirender ulang kalau ada update datanya? Solusinya, kita bisa mengganti useState hooks dengan useRef hooks.

Penjelasan kode di atas adalah ketika tombol add diklik maka nilai dari number.current akan di update, namun perubahan data tersebut tidak akan membuat komponen di render ulang.

Kalau gitu, kenapa kita gak pake useRef aja biar tidak terjadi render terus menerus ketika datanya berubah?

Sayangnya, perubahan nilai useRef tidak akan berpengaruh ke tampilannya. Pada contoh diatas, di UI nya akan tetap tampil angka satu sesuai dengan default nilai yang kita kasih pertama kali.

Contoh lainnya:

Maksud dari kode diatas adalah, setiap dilakukan render pada komponen useRef3 maka useEffect akan dieksekusi yang mana didalamnya terdapat nilai rerender.current yang akan dieksekusi setiap kali komponen di render.

Kenapa tidak menggunakan useState? jika menggunakan useState maka akan terjadi render ulang secara terus-menerus karena nilai statenya akan terus berubah, sehingga useEffect akan terus-menerus di render ulang.