Hook useRef untuk Bekerja dengan Ref di React

Pada pelajaran ini, kita akan bekerja dengan ref. Untuk kejelasan, mari kita bahas cara kerja hook useRef dengan membandingkannya dengan hook useState.

Mari buat komponen dengan tombol:

return (
	<div>
		<button>
			state click
		</button>
	</div>
);

Impor useState ke dalam komponen:

import { useState } from 'react';

Dan buat state state:

const [state, setState] = useState(0);

Dan sekarang, mari kita buat agar saat diklik tombol, state kita bertambah sebesar 1. Nilai state akan kita tampilkan langsung di teks tombol:

<button onClick={handleStateClick}>
	state click: {state}
</button>

Jelaskan fungsi untuk menangani klik pada tombol handleStateClick:

function handleStateClick() {
	setState(state + 1);
}

Mari klik tombolnya dan lihat bagaimana nilai state bertambah.

Dan sekarang mari buat komponen App, tetapi menggunakan bukan state, melainkan ref.

Pertama, impor useRef ke dalam komponen:

import { useRef } from 'react';

Dan buat ref ref. Hasil dari hook useRef adalah objek ref dengan satu-satunya properti current, yang akan menjadi perhatian kita selanjutnya. Atur nilai awalnya ke 0:

const ref = useRef(0);

Pasang penangan klik pada tombol. Ingat, kita harus membaca/mengubah bukan ref itu sendiri, melainkan propertinya current:

<button onClick={handleRefClick}>
	ref click: {ref.current}
</button>

Tambahkan fungsi untuk menangani klik pada tombol kita. Di sini kita akan menambah current sebesar 1, seperti pada contoh sebelumnya dengan state. Berbeda dengan state yang memerlukan fungsi setState untuk mengubah nilainya, kita bekerja dengan properti ref secara langsung:

function handleRefClick() {
	ref.current = ref.current + 1;
}

Sekarang mari klik tombol kita. Dan apa yang kita lihat? Saat diklik, nilai yang awalnya 0, tetap tidak berubah.

Anda tentu saja mungkin mulai meragukan apakah nilainya memang berubah. Mari kita periksa. Untuk itu, dalam fungsi penangan klik tambahkan baris kode untuk menampilkan nilai current ke konsol:

function handleRefClick() {
	ref.current = ref.current + 1;
	console.log('ref click: ' + ref.current);
}

Dan sekarang, buka konsol di browser, sekali lagi klik tombol dan pastikan bahwa nilainya memang berubah setiap kali diklik dan tidak ada penipuan.

Sekarang kita melihat bahwa berbeda dengan state, perubahan nilai ref tidak menyebabkan render ulang komponen. Itulah sebabnya kita setiap kali dalam teks tombol melihat nilai awal 0.

Dengan demikian, jika data Anda digunakan untuk rendering, maka simpanlah dalam state, dan jika Anda tidak perlu rendering, dalam hal ini penggunaan ref bisa menjadi lebih efektif.

Misalkan dalam komponen Anda ada paragraf dengan teks 'text' dan tombol. Buatlah agar setiap kali diklik tombol pada akhir teks paragraf ditambahkan tanda seru. Lakukan ini dengan menggunakan state.

Buat komponen App, tetapi alih-alih state sekarang gunakan ref. Pastikan bahwa saat tombol ditekan teks paragraf tidak akan berubah. Tambahkan juga tampilan teks paragraf ke konsol, buka konsol dan pastikan, bahwa sebenarnya teksnya berubah.