API memo i React

Før vi ser på den næste hook, er det nødvendigt at nævne det nyttige API memo, som hjælper os med at undgå unødvendig gen-gengivelse af en komponent, hvis dens props forbliver uændrede.

Lad os se på et eksempel. Vi opretter komponenten App, som vil have to inputfelter, hvor man for eksempel indtaster fornavn og efternavn:

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

Vi tilføjer til toppen af komponenten state for dem:

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

Lad os også lave en underordnet komponent Child.js, lad den vise en hilsen, hvor det indtastede fornavn vil blive vist. Derudover vil en streng 'child render' blive vist i konsollen ved hver gengivelse af denne komponent:

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

Vi tilføjer Child til layoutet af hoved- komponenten efter det sidste inputfelt og vil sende fornavnet til den som en prop:

<Child name={name} />

Vi importerer den til hovedkomponenten:

import Child from './Child';

Og nu åbner vi konsollen og begynder at indtaste fornavn og efternavn i inputfelterne. Her vil vi se, at selv når der indtastes tegn i feltet for efternavn, vil vores underordnede komponent blive gengivet hver gang. Det er ikke noget problem, da vores komponent er lille. Men forestil dig, hvis denne komponent viste en stor mængde data og samtidig blev gengivet hver gang.

Lad os nu pakke den underordnede komponent ind i memo og se, hvordan gengivelsen ændrer sig. Til at starte med importerer vi memo til den:

import { memo } from 'react';

Derefter opretter vi en ny variabel og tildeler den vores Child, pakket ind i memo. Vi får følgende funktionsudtryk:

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

Vi åbner konsollen og begynder igen at indtaste fornavn og efternavn i felterne. Nu ser vi, at når vi indtaster efternavn, bliver vores underordnede komponent ikke gengivet på ny.

Det er vigtigt at huske, at dette ikke vil virke, hvis der ændres state, som komponenten bruger, eller kontekst, der involverer ændringer, selvom props forbliver uændrede.

Tag koden for komponenten App, som vi lavede i denne lektion, og behold kun det første inputfelt. Opret en React komponent Text, der indeholder et afsnit med teksten 'long text', og placer den i App efter inputfeltet.

Tilføj linjen console.log('text render'); i komponenten Text. Sikr dig, at komponenten Text bliver gengivet på ny hver gang, når der indtastes tegn i inputfeltet.

Pak nu komponenten Text ind i memo. Sikr dig, at komponenten Text ikke gengives på ny, når der indtastes tegn i inputfeltet.