API memo i React

Innan vi tittar på nästa hook, är det nödvändigt att nämna det användbara API:et memo, som hjälper oss att undvika omrendering av en komponent, om dess props förblir oförändrade.

Låt oss ta ett exempel. Vi skapar komponenten App, som kommer att ha två inmatningsfält där, låt oss anta, förnamn och efternamn matas in:

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

Låt oss lägga till tillstånd för dem i början av komponenten:

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

Låt oss också skapa en underordnad komponent Child.js, låt den skriva ut en hälsning som kommer att visa det inmatade förnamnet. En sträng 'child render' kommer också att skrivas ut i konsolen vid varje rendering av denna komponent:

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

Låt oss lägga till Child i markupen för huvudkomponenten efter den sista inmatningen och skicka förnamnet som en prop till den:

<Child name={name} />

Importera den till huvudkomponenten:

import Child from './Child';

Och nu öppnar vi konsolen och börjar mata in förnamn och efternamn i fälten. Här ser vi att även när tecken matas in i efternamnsfältet kommer vår underordnade komponent att ritas om varje gång. Inga problem, eftersom vi har en liten komponent. Men tänk dig om den här komponenten visade en stor mängd data och samtidigt ritas om varje gång.

Och låt oss nu svepa in den underordnade komponenten i memo och se hur renderingen förändras. Först importerar vi memo till den:

import { memo } from 'react';

Skapa sedan en ny variabel och tilldela den vår Child, insvept i memo. Vi får följande funktionellt uttryck:

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

Vi öppnar konsolen och börjar igen mata in förnamn och efternamn i fälten. Nu ser vi att när efternamn matas in, återrenderas inte vår underordnade komponent.

Det är viktigt att komma ihåg att detta inte kommer att fungera om tillstånd som används av komponenten ändras trots oförändrade props, eller om en kontext som använder förändringar ändras.

Ta koden för komponenten App, som vi gjorde i den här lektionen, lämna bara det första inmatningsfältet i den. Skapa en React komponent Text som innehåller ett stycke med texten 'long text', och placera den i App efter inmatningsfältet.

I komponenten Text, lägg till raden console.log('text render');. Se till att när tecken matas in i inmatningsfältet så återrenderas komponenten Text varje gång.

Och svep nu in komponenten Text i memo. Se till att när tecken matas in i inmatningsfältet så återrenderas inte komponenten Text på nytt.