API memo en React

Antes de considerar el siguiente hook, es necesario mencionar también la útil API memo, que nos ayuda a evitar el rerenderizado de un componente, si sus props permanecen sin cambios.

Analicemos esto con un ejemplo. Creemos un componente App, que tendrá dos inputs, en los cuales, supongamos, se ingresan el nombre y el apellido:

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

Añadamos al inicio del componente los estados para ellos:

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

Hagamos también un componente hijo Child.js, que muestre un saludo, en el cual se mostrará el nombre ingresado. También en la consola se mostrará la cadena 'child render' en cada renderizado de este componente:

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

Añadamos Child en el maquetado del componente principal después del último input y pasémosle como prop el nombre:

<Child name={name} />

Importémoslo en el componente principal:

import Child from './Child';

Y ahora abramos la consola y comencemos a ingresar nombre y apellido en los campos. Aquí veremos que incluso al ingresar caracteres en el campo para el apellido, nuestro componente hijo se redibujará cada vez. No hay problema, ya que nuestro componente es pequeño. Pero imaginen si este componente mostrara una gran cantidad de datos y, además, se redibujara cada vez.

Y ahora envolvamos el componente hijo en memo, y veamos cómo cambia el renderizado. Primero importemos en él memo:

import { memo } from 'react';

Luego creemos una nueva variable y asignémosle nuestro Child, envuelto en memo. Obtendremos la siguiente expresión funcional:

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

Abramos la consola e ingresemos nuevamente nombre y apellido en los campos. Ahora vemos que al ingresar el apellido, nuestro componente hijo no se redibuja.

Hay que recordar que esto no funcionará si con las props sin cambios se modifican los estados utilizados por el componente o el contexto que utiliza cambios.

Tome el código del componente App, que hicimos en esta lección, deje en él solo el primer input. Cree un componente React Text, que contenga un párrafo con el texto 'long text', y colóquelo en App después del input.

En el componente Text añada la línea console.log('text render');. Asegúrese de que al ingresar caracteres en el input el componente Text se redibuja cada vez.

Y ahora envuelva el componente Text en memo. Asegúrese de que al ingresar caracteres en el input el componente Text no se redibuja repetidamente.