API memo in React

Voordat we de volgende hook bekijken, is het nodig om ook de nuttige API memo te vermelden, die ons helpt om het opnieuw renderen van een component te vermijden, als zijn props ongewijzigd blijven.

Laten we dit uitwerken met een voorbeeld. We maken een component App, waarin twee invoervelden zitten, waar, laten we aannemen, de voornaam en achternaam worden ingevoerd:

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

We voegen bovenaan de component states ervoor toe:

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

Laten we ook een child component maken Child.js, laat het een begroeting tonen, waarin de ingevoerde voornaam wordt weergegeven. Ook wordt in de console de string 'child render' uitgevoerd bij elke rendering van deze component:

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

We voegen Child toe aan de markup van de hoofd component na het laatste invoerveld en we zullen het als prop de voornaam doorgeven:

<Child name={name} />

We importeren het in de hoofd component:

import Child from './Child';

En nu openen we de console en gaan we in de invoervelden de voornaam en achternaam invoeren. Hier zien we dat zelfs bij het invoeren van karakters in het veld voor de achternaam, onze child component elke keer opnieuw wordt gerenderd. Geen enkel probleem, want we hebben een kleine component. Stel je echter voor dat deze component een grote hoeveelheid data weergaf en tegelijkertijd, elke keer opnieuw werd gerenderd.

Laten we nu de child component in memo wikkelen, en kijken, hoe de rendering verandert. Om te beginnen importeren we er memo in:

import { memo } from 'react';

Vervolgens maken we een nieuwe variabele en kenen we er onze Child aan toe, gewikkeld in memo. We krijgen het volgende function expression:

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

We openen de console en gaan opnieuw de voornaam en achternaam in de velden invoeren. Nu zien we dat bij het invoeren van de achternaam, onze child component niet opnieuw wordt gerenderd.

We moeten onthouden dat dit niet zal werken, als bij ongewijzigde props de states, die door de component worden gebruikt, veranderen of de context, die veranderingen gebruikt.

Neem de code van component App, die we in deze les hebben gemaakt, laat er alleen het eerste invoerveld in staan. Maak een React component Text, die een alinea met de tekst 'long text' bevat, en plaats deze in App na het invoerveld.

Voeg in component Text de regel console.log('text render'); toe. Zorg ervoor dat bij het invoeren van karakters in het invoerveld de component Text elke keer opnieuw wordt gerenderd.

En nu wikkel je de component Text in memo. Zorg ervoor, dat bij het invoeren van karakters in het invoerveld de component Text niet opnieuw wordt gerenderd.