API memo di React

Sebelum kita membahas hook berikutnya, perlu disebutkan juga tentang API yang berguna memo, yang membantu kita menghindari render ulang komponen, jika props-nya tetap tidak berubah.

Mari kita uraikan ini dengan contoh. Buatlah komponen App, yang di dalamnya akan ada dua input, yang, misalnya, dimasukkan nama depan dan nama belakang:

return (
	<div>
		<label>
			name:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			surname:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

Tambahkan di awal komponen state untuk mereka:

const [name, setName] = useState('');
const [surn, setSurn] = useState('');

Buat juga komponen anak Child.js, biarkan dia menampilkan sapaan, yang akan menampilkan nama yang dimasukkan. Juga di konsol akan ditampilkan string 'child render' pada setiap render komponen ini:

function Child({ name }) {
	console.log('child render');
	return <h3>Hello {name}!</h3>;
}

Tambahkan Child ke markup komponen utama setelah input terakhir dan sebagai props kita akan meneruskan nama kepadanya:

<Child name={name} />

Impor komponen tersebut ke komponen utama:

import Child from './Child';

Dan sekarang buka konsol dan masukkan nama depan dan nama belakang ke dalam field input. Di sini kita akan melihat bahwa bahkan ketika memasukkan karakter ke dalam field untuk nama belakang, komponen anak kita akan di-render ulang setiap kali. Tidak ada masalah, karena komponen kita kecil. Tapi bayangkan jika komponen ini menampilkan banyak data dan pada saat yang sama, di-render ulang setiap kali.

Dan sekarang mari kita bungkus komponen anak dalam memo, dan lihat bagaimana render-nya berubah. Pertama-tama impor memo ke dalamnya:

import { memo } from 'react';

Kemudian buat variabel baru dan berikan Child kita, dibungkus dalam memo. Kita akan mendapatkan berikut ini ekspresi fungsional:

const Child = memo( function Child({ name }) {
	console.log('child render');
	return <h3>Hello {name}!</h3>;
});

Buka konsol dan masukkan lagi nama depan dan nama belakang ke dalam field. Sekarang kita melihat bahwa ketika memasukkan nama belakang, komponen anak kita tidak di-render ulang.

Perlu diingat bahwa ini tidak akan bekerja, jika dengan props yang tidak berubah, state yang digunakan komponen berubah, atau konteks yang menggunakan perubahan.

Ambil kode komponen App, yang kita buat dalam pelajaran ini, sisakan hanya input pertama di dalamnya. Buat komponen React Text, yang berisi paragraf dengan teks 'long text', dan tempatkan di App setelah input.

Dalam komponen Text tambahkan baris console.log('text render');. Pastikan bahwa ketika memasukkan karakter ke dalam input, komponen Text di-render ulang setiap kali.

Dan sekarang bungkus komponen Text dalam memo. Pastikan, bahwa ketika memasukkan karakter ke dalam input komponen Text tidak di-render ulang secara berulang.