API memo Reactissa

Ennen kuin tarkastelemme seuraavaa koukku, on tarpeen mainita hyödyllisestä API:sta memo, joka auttaa meitä välttämään komponentin uudelleenrenderöintiä, jos sen propit pysyvät muuttumattomina.

Käydään tämä läpi esimerkin avulla. Luodaan komponentti App, jossa on kaksi syöttökenttää, joihin oletettavasti syötetään etunimi ja sukunimi:

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

Lisätään komponentin alkuun niiden tilat:

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

Tehdään vielä lapsikomponentti Child.js, joka tulostaa tervehdyksen, jossa näytetään syötetty etunimi. Myös konsoliin tulostuu merkkijono 'child render' aina tämän komponentin renderöinnin yhteydessä:

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

Lisätään Child pääkomponentin verkkosivurakenteeseen viimeisen syöttökentän jälkeen ja välitetään sille etunimi propina:

<Child name={name} />

Tuodaan se pääkomponenttiin:

import Child from './Child';

Avataan nyt konsoli ja alettaan syöttää nimi ja sukunimi kenttiin. Tässä näemme, että vaikka syöttäisimme merkkejä sukunimikenttään, lapsikomponenttimme piirtyy uudelleen joka kerta. Ei mitään ongelmaa, koska komponenttimme on pieni. Mutta kuvittele, jos tämä komponentti näyttäisi suuren määrän dataa ja samalla piirtyisi uudelleen joka kerta.

Kiedotaan nyt lapsikomponentti memo:n sisään ja katsotaan, kuinka renderöinti muuttuu. Tuodaan ensin siihen memo:

import { memo } from 'react';

Luodaan sitten uusi muuttuja ja annetaan sille arvoksi Child, kiedottuna memo:n sisään. Saamme seuraavan funktiolausekkeen:

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

Avataan konsoli ja syötetään uudelleen nimi ja sukunimi kenttiin. Nyt näemme, että sukunimeä syötettäessä, lapsikomponenttiamme ei piirretä uudelleen.

On muistettava, että tämä ei toimi, jos muuttumattomilla propeilla muuttuvat komponentin käyttämät tilat tai konteksti, joka käyttää muutoksia.

Ota komponentin App koodi, jota teimme tällä oppitunnilla, jätä siitä vain ensimmäinen syöttökenttä. Luo React komponentti Text, joka sisältää kappaleen tekstillä 'long text', ja sijoita se App:n syöttökentän jälkeen.

Komponentissa Text lisää rivin console.log('text render');. Varmista, että merkkejä syötettäessä syöttökenttään komponentti Text piirtyy uudelleen joka kerta.

Kiedota nyt komponentti Text memo:n sisään. Varmista, että merkkejä syötettäessä syöttökenttään komponentti Text ei piirry uudelleen toistamiseen.