A memo API React-ben

Mielőtt rátérnénk a következő hookra, említenünk kell egy hasznos API-t, a memo-t, amely segít nekünk elkerülni egy komponens újrarenderelését, ha a propjai változatlanok maradnak.

Nézzük ezt egy példán keresztül. Hozzunk létre egy App komponenst, amelyben két bemenet lesz, tegyük fel, hogy a kereszt- és vezetéknevet kell beírni:

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

Adjunk hozzá a komponens elején állapotokat ezekhez:

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

Készítsünk még egy gyermek komponenst Child.js, jelenítse meg a üdvözlést, amelyben a beírt név jelenik meg. A konzolra írjon ki egy 'child render' stringet minden alkalommal, amikor ez a komponens renderelődik:

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

Adjuk hozzá a Child-t a fő komponens markup-jához az utolsó bemenet után és adjuk át neki prop-ként a nevet:

<Child name={name} />

Importáljuk be a fő komponensbe:

import Child from './Child';

Most nyissuk meg a konzolt és írjunk be a bemeneti mezőkbe nevet és vezetéknevet. Itt látni fogjuk, hogy még akkor is, ha a vezetéknév mezőbe írunk karaktereket, a gyermek komponensünk minden alkalommal újrarajzolódik. Ez nem jelent problémát, hiszen csak egy kis komponensről van szó. De képzeld el, ha ez a komponens nagyon sok adatot jelenítene meg és közben minden alkalommal újrarajzolódna.

Most pedig csomagoljuk be a gyermek komponenst memo-be, és figyeljük meg, hogyan változik a renderelés. Először importáljuk be a memo-t:

import { memo } from 'react';

Ezután hozzunk létre egy új változót és rendeljük hozzá a Child-unkat, becsomagolva memo-be. A következő függvény kifejezés adódik:

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

Nyissuk meg a konzolt és írjunk be újra nevet és vezetéknevet a mezőkbe. Most látjuk, hogy a vezetéknév beírásakor a gyermek komponensünk nem rajzolódik újra.

Nem szabad elfelejteni, hogy ez nem fog működni, ha a változatlan prop-ok mellett megváltoznak a komponens által használt állapotok vagy a változásokat használó kontextus.

Vedd a App komponens kódját, amelyet ezen a leckén készítettünk, hagyd benne csak az első bemenetet. Hozz létre egy React komponenst Text, amely tartalmaz egy bekezdést a 'long text' szöveggel, és helyezd el a App-ben a bemenet után.

A Text komponensben adj hozzá egy console.log('text render'); sort. Győződj meg róla, hogy a bemenetbe írt karakterek beírásakor a Text komponens minden alkalommal újrarenderelődik.

Most csomagold be a Text komponenst memo-be. Győződj meg róla, hogy a bemenetbe írt karakterek beírásakor a Text komponens nem renderelődik újra isételten.