API memo no React

Antes de considerarmos o próximo hook, é necessário mencionar a útil API memo, que nos ajuda a evitar a re-renderização de um componente, se suas props permanecerem inalteradas.

Vamos analisar isso com um exemplo. Vamos criar um componente App, que terá dois campos de entrada, nos quais, suponhamos, são inseridos nome e sobrenome:

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

Vamos adicionar no início do componente os estados para eles:

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

Vamos criar também um componente filho Child.js, que exibirá uma saudação, na qual será exibido o nome inserido. Além disso, no console será exibida a string 'child render' a cada renderização deste componente:

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

Vamos adicionar Child no JSX do componente principal após o último campo de entrada e vamos passar para ele como prop o nome:

<Child name={name} />

Vamos importá-lo no componente principal:

import Child from './Child';

E agora vamos abrir o console e inserir nome e sobrenome nos campos de entrada. Aqui veremos que mesmo ao digitar caracteres no campo para o sobrenome, nosso componente filho será renderizado novamente a cada vez. Nenhum problema, pois temos um componente pequeno. Mas imagine se este componente exibisse uma grande quantidade de dados e, ao mesmo tempo, fosse renderizado novamente a cada vez.

E agora vamos envolver o componente filho em memo e observar como a renderização muda. Primeiro, vamos importar memo para ele:

import { memo } from 'react';

Em seguida, vamos criar uma nova variável e atribuir a ela nosso Child, envolvido em memo. Teremos o seguinte expressão funcional:

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

Vamos abrir o console e inserir nome e sobrenome nos campos novamente. Agora vemos que ao digitar o sobrenome, nosso componente filho não é renderizado novamente.

É preciso lembrar que isso não funcionará se, com props inalteradas, mudarem os estados utilizados pelo componente ou o contexto que utiliza mudanças.

Pegue o código do componente App, que fizemos nesta lição, deixe nele apenas o primeiro campo de entrada. Crie um componente React Text, contendo um parágrafo com o texto 'texto longo', e posicione-o em App após o campo de entrada.

No componente Text adicione a linha console.log('text render');. Certifique-se de que ao digitar caracteres no campo de entrada, o componente Text é renderizado novamente a cada vez.

E agora envolva o componente Text em memo. Certifique-se de que ao digitar caracteres no campo de entrada o componente Text não é renderizado novamente.