API memo w React

Zanim przejdziemy do następnego hooka, warto wspomnieć o przydatnym API memo, które pomaga nam uniknąć ponownego renderowania komponentu, jeśli jego właściwości pozostają niezmienne.

Przeanalizujmy to na przykładzie. Stwórzmy komponent App, który będzie zawierał dwa pola wprowadzania, w których, załóżmy, wpisywane są imię i nazwisko:

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

Dodajmy na początku komponentu stany dla nich:

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

Stwórzmy również komponent potomny Child.js, niech wyświetla powitanie, w którym będzie wyświetlane wprowadzane imię. Również w konsoli będzie wyświetlany ciąg znaków 'child render' przy każdym renderowaniu tego komponentu:

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

Dodajmy Child do wersji głównego komponentu po ostatnim polu wprowadzania i przekazujmy mu jako właściwość imię:

<Child name={name} />

Zaimportujmy go do głównego komponentu:

import Child from './Child';

A teraz otwórzmy konsolę i wprowadzajmy imię i nazwisko w pola wprowadzania. Tutaj zobaczymy, że nawet przy wprowadzaniu znaków do pola na nazwisko, nasz komponent potomny będzie za każdym razem przerysowywany. Żadnych problemów, w końcu mamy mały komponent. Ale wyobraźcie sobie, gdyby ten komponent wyświetlał dużą ilość danych i przy tym, za każdym razem był przerysowywany.

A teraz owińmy komponent potomny w memo i zobaczmy, jak zmieni się renderowanie. Na początek zaimportujmy do niego memo:

import { memo } from 'react';

Następnie stwórzmy nową zmienną i przypiszmy jej nasz Child, owinięty w memo. Otrzymamy następujące wyrażenie funkcyjne:

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

Otwórzmy konsolę i wprowadzajmy ponownie imię i nazwisko w pola. Teraz widzimy, że przy wprowadzaniu nazwiska, nasz komponent potomny nie jest przerysowywany.

Należy pamiętać, że to nie będzie działać, jeśli przy niezmienionych właściwościach zmienią się stany używane przez komponent lub kontekst, który wykorzystuje zmiany.

Weź kod komponentu App, który robiliśmy na tej lekcji, zostaw w nim tylko pierwsze pole wprowadzania. Stwórz React komponent Text, zawierający akapit z tekstem 'long text', i umieść go w App po polu wprowadzania.

W komponencie Text dodaj wiersz console.log('text render');. Upewnij się, że przy wprowadzaniu znaków w pole wprowadzania komponent Text jest przerysowywany za każdym razem.

A teraz owiń komponent Text w memo. Upewnij się, że przy wprowadzaniu znaków w pole wprowadzania komponent Text nie jest przerysowywany ponownie.