Hook Optimasi Performa useMemo di React

Hook pertama untuk optimasi performansi yang akan kita bahas adalah useMemo.

Hook ini membantu meng-cache hasil operasi yang memakan sumber daya antara momen render ulang layar dan karenanya dapat membantu menghindari komputasi yang berat dan tidak perlu. Cache semacam ini juga disebut memoization.

Mari kita lihat cara kerjanya. Ayo buat komponen dengan tombol dan judul h3:

return (
	<div>
		<h3>Text</h3>
		<button>click</button>
	</div>
);

Dan sekarang mari kita buat agar saat diklik judul, warnanya berubah dari oranye menjadi hijau dan sebaliknya. Pertama-tama mari buat state isGreen:

const [isGreen, setIsGreen] = useState(false);

Mari tambahkan kondisi perubahan warna pada atribut style judul dan pasang penangan klik:

<h3 onClick={() => setIsGreen(!isGreen)}
	style={{ color: isGreen ? 'green' : 'orangered' }}
>Text</h3>

Misalkan kita juga memiliki nilai tertentu, yang akan bertambah satu per satu saat diklik pada tombol kita. Mari buat state untuknya:

const [num, setNum] = useState(0);

Mari tambahkan penanganan klik pada tombol:

<button onClick={() => setNum(num + 1)}>
	clicks
</button>

Misalkan kita juga memiliki fungsi tertentu square, yang akan mengembalikan kuadrat dari nilai num. Hasil pemanggilan fungsi akan kita simpan dalam variabel result:

const result = square(num);

function square(num) {
	return num * num;
}

Mari tampilkan result dalam teks tombol:

<button onClick={() => setNum(num + 1)}>
	clicks: {result}
</button>

Hasilnya, kita mendapatkan yang berikut: saat tombol diklik, nilai num berubah, yang kemudian dikuadratkan, dan saat judul diklik warna judul berubah.

Komponen kita sangat kecil, semuanya bekerja dengan cepat, meskipun saat diklik pada judul untuk mengubah warnanya, seluruh komponen di-render ulang, karenanya perhitungan yang terkait dengan tombol juga terjadi lagi, bahkan meskipun kita tidak menyentuhnya. Dan sekarang bayangkan jika perhitungan kita berat dan semuanya dihitung ulang setiap kali.

Mari kita beri sedikit beban pada fungsi kita, sekarang ia akan "berpikir" sedikit lebih lama. Dengan demikian kita mensimulasikan komputasi yang lama:

function square(num) {
	let startTime = performance.now();
	
	while (performance.now() - startTime < 500) {
		// Hanya tidak melakukan apa-apa ...
	}
	
	return num * num;
}

Sekarang coba klik judulnya. Ternyata, sekarang karena fungsi square bekerja lama (dan kita tidak menyentuh tombolnya) kita harus menunggu sangat lama untuk mengubah warna judul!

Di sinilah hook useMemo akan membantu kita. Untuk itu, kita perlu mengirimkan parameter pertama sebuah fungsi yang menghitung nilai yang ingin kita-cache, fungsi ini harus murni dan tidak menerima parameter apa pun. Dan parameter kedua - dependensi dalam kurung siku dengan kata lain, semua nilai reaktif yang terlibat dalam kode fungsi. Dengan demikian, di result sekarang kita akan menulis konstruksi seperti ini:

const result = useMemo(() => square(num), [num]);

Mari klik judul lagi. Sekarang, jika kita tidak menyentuh tombol dengan komputasi dan tidak mengubah nilai state num, maka tidak ada yang dihitung ulang, dan React menampilkan nilai yang di-cache pada tombol, itulah sebabnya judul kita dengan cepat mengubah warnanya.

Buat komponen App, tempatkan sebuah paragraf di dalamnya. Buat state text dengan nilai awal 'react', biarkan nilai state ditampilkan sebagai teks paragraf. Saat diklik pada paragraf, tambahkan tanda seru di akhir teksnya.

Buat state lain num, dengan nilai awal 0. Tempatkan di App paragraf lain. Buat agar saat diklik padanya, num bertambah sebesar 1.

Dan sekarang tambahkan ke App fungsi triple, yang menerima parameter num dan mengembalikan nilai tiga kali lipatnya. Simpan hasil pemanggilan fungsi ke dalam variabel result. Tampilkan result sebagai teks paragraf kedua. Coba klik paragraf secara bergantian, perhatikan betapa lambatnya tanda seru ditambahkan.

Perbaiki situasinya, dengan membungkus fungsi yang lambat triple dalam useMemo.