API memo i React

Før vi tar for oss neste hook, må vi nevne det nyttige API-et memo, som hjelper oss med å unngå gjengivelse av komponenter på nytt, hvis propsene forblir uendret.

La oss se på et eksempel. La oss opprette en komponent App som har to inndatafelt der vi antar at fornavn og etternavn skrives inn:

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

La oss legge til tilstander for dem i starten av komponenten:

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

La oss også lage en underkomponent Child.js, la den vise en hilsen som vil vise navnet som skrives inn. Også i konsollen vil en streng 'child render' vises ved hver gjengivelse av denne komponenten:

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

La oss legge til Child i koden til hovedkomponenten etter det siste inndatafeltet og vi vil sende navnet som en prop til den:

<Child name={name} />

La oss importere den til hovedkomponenten:

import Child from './Child';

La oss så åpne konsollen og skrive inn fornavn og etternavn i inndatafeltene. Her vil vi se at selv når vi skriver tegn i feltet for etternavn, vil vår underkomponent blir gjengitt på nytt hver gang. Ingen problemer, fordi vi har en liten komponent. Men tenk deg at denne komponenten viste en stor mengde data og samtidig ble gjengitt på nytt hver gang.

La oss nå omslutte underkomponenten i memo, og se hvordan gjengivelsen endres. Først må vi importere memo til den:

import { memo } from 'react';

Deretter oppretter vi en ny variabel og tildeler den vår Child, omsluttet i memo. Vi vil få følgende funksjonsuttrykk:

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

La oss åpne konsollen og igjen skrive inn fornavn og etternavn i feltene. Nå ser vi at når vi skriver etternavn, blir ikke underkomponenten vår gjengitt på nytt.

Vi må huske at dette ikke vil fungere hvis tilstander som er involvert i komponenten endres, selv om propsene forblir uendrede, eller kontekst som bruker endringer.

Ta koden til komponenten App, som vi laget i denne leksjonen, la bare være det første inndatafeltet i den. Opprett en React komponent Text som inneholder et avsnitt med teksten 'long text', og plasser den i App etter inndatafeltet.

I komponenten Text, legg til en linje console.log('text render');. Forsikre deg om at når du skriver tegn i inndatafeltet, blir komponenten Text gjengitt på nytt hver gang.

Og nå omslutter du komponenten Text i memo. Forsikre deg om at når du skriver tegn i inndatafeltet, blir komponenten Text ikke gjengitt på nytt.