React'ta memo API'si

Bir sonraki kancayı ele almadan önce, bileşenin prop'ları değişmediği sürece yeniden render edilmesini önlememize yardımcı olan faydalı memo API'sinden de bahsetmek gerekir.

Bunu bir örnekle inceleyelim. İçinde ad ve soyad girildiğini varsayacağımız iki input bulunan bir App bileşeni oluşturalım:

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

Bileşenin başında onlar için state'ler ekleyelim:

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

Bir de alt bileşen yapalım Child.js, girilen adın görüntüleneceği bir selamlama çıktısı versin. Ayrıca, bu bileşen her render edildiğinde konsola 'child render' dizesi yazdırılsın:

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

Child'ı ana bileşenin son inputundan sonraki kısmına ekleyelim ve ona prop olarak adı iletelim:

<Child name={name} />

Onu ana bileşene içe aktaralım:

import Child from './Child';

Şimdi konsolu açalım ve input alanlarına ad ve soyad girmeye başlayalım. Burada soyad alanına karakter girildiğinde bile, alt bileşenimizin her seferinde yeniden render edildiğini göreceğiz. Herhangi bir sorun yok, sonuçta küçük bir bileşen. Ama ya bu bileşen çok fazla veri görüntülüyor olsaydı ve aynı zamanda her seferinde yeniden render ediliyor olsaydı bir düşünün.

Şimdi ise alt bileşeni memo ile sarmalayalım ve render işleminin nasıl değiştiğine bakalım. Öncelikle içine memo'yu içe aktaralım:

import { memo } from 'react';

Ardından yeni bir değişken oluşturalım ve ona memo ile sarmalanmış Child'ımızı atayalım. Şu şekilde bir fonksiyon ifadesi elde edeceğiz:

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

Konsolu açalım ve tekrar ad ve soyadı input alanlarına girelim. Şimdi soyad girildiğinde, alt bileşenimizin yeniden render edilmediğini görüyoruz.

Unutulmamalıdır ki bu, prop'lar değişmese bile bileşen tarafından kullanılan state'ler veya değişiklik kullanan context değişirse çalışmayacaktır.

Bu derste yaptığımız App bileşeninin kodunu alın, içinde sadece ilk inputu bırakın. İçinde 'long text' metni olan bir paragraf bulunduran bir React bileşeni Text oluşturun ve onu App bileşeninde inputun altına yerleştirin.

Text bileşenine console.log('text render'); satırını ekleyin. Inputa karakter girildiğinde Text bileşeninin her seferinde yeniden render edildiğinden emin olun.

Şimdi Text bileşenini memo ile sarmalayın. Inputa karakter girildiğinde Text bileşeninin tekrar yeniden render edilmediğinden emin olun.