API memo v Reactu

Než se podíváme na další hook, je nutné zmínit i užitečné API memo, které nám pomáhá vyhnout se opětovnému renderování komponenty, pokud její props zůstávají nezměněny.

Pojďme si to rozebrat na příkladu. Vytvoříme komponentu App, ve které budou dva inputy, do kterých se, předpokládejme, zadávají jméno a příjmení:

return (
	<div>
		<label>
			jméno:
			<input value={name} onChange={(e) => setName(e.target.value)} />
		</label>
		<br />
		<label>
			příjmení:
			<input value={surn} onChange={(e) => setSurn(e.target.value)} />
		</label>
	</div>
);

Přidejme na začátek komponenty stavy pro ně:

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

Vytvořme ještě dceřinou komponentu Child.js, ať vypisuje pozdrav, ve kterém se bude zobrazovat zadávané jméno. Také v konzoli se bude vypisovat řetězec 'child render' při každém renderování této komponenty:

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

Přidejme Child do verze hlavní komponenty za poslední input a budeme mu jako props předávat jméno:

<Child name={name} />

Importujme ji do hlavní komponenty:

import Child from './Child';

A nyní otevřeme konzoli a budeme do polí pro vstup zadávat jméno a příjmení. Zde uvidíme, že i při zadávání znaků do pole pro příjmení se naše dceřiná komponenta bude pokaždé překreslovat. Žádné problémy, vždyť máme malou komponentu. Ale představte si, kdyby tato komponenta zobrazovala velké množství dat a přitom se pokaždé překreslovala.

A teď zabalme dceřinou komponentu do memo a podívejme se, jak se změní renderování. Pro začátek importujme do ní memo:

import { memo } from 'react';

Poté vytvořme novou proměnnou a přiřaďme jí naši Child, zabalenou do memo. Dostaneme následující funkční výraz:

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

Otevřeme konzoli a budeme znovu zadávat jméno a příjmení do polí. Nyní vidíme, že při zadávání příjmení se naše dceřiná komponenta nepřekresluje.

Je třeba pamatovat, že to nebude fungovat, pokud se při nezměněných propsech změní stavy, které komponenta využívá, nebo kontext, který používá změny.

Vezměte kód komponenty App, kterou jsme dělali v této lekci, nechte v ní pouze první input. Vytvořte React komponentu Text, obsahující odstavec s textem 'long text', a umístěte ji v App za input.

V komponentě Text přidejte řádek console.log('text render');. Přesvědčte se, že při zadávání znaků do inputu se komponenta Text překresluje pokaždé.

A nyní zabalte komponentu Text do memo. Přesvědčte se, že při zadávání znaků do inputu se komponenta Text nepřekresluje opakovaně.