memo

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

• Uso
  • Saltar el re-renderizado cuando las props no han cambiado
  • Actualizar un componente memorizado usando el estado
  • Actualizar un componente memorizado utilizando un contexto
  • Minimizar los cambios en las props
  • Especificar una función comparadora personalizada
• Referencias
  • memo(Component, arePropsEqual?)
• Solución de problemas
  • Mi componente se re-renderiza cuando una prop es un objeto, array, o una función

Uso

Saltar el re-renderizado cuando las props no han cambiado

React normalmente re-renderiza un componente siempre que su padre se re-renderiza. Con memo, puedes crear un componente que no se re-renderizará cuando su padre se re-renderice siempre y cuando sus nuevas props sean las mismas que sus antiguas props. Dicho componente se dice que está memorizado.

Para memorizar un componente, envuélvelo en una llamada a memo y usa el valor que devuelve en lugar de tu componente original:

const Greeting = memo(function Greeting({ name }) {
  return <h1>Hola, {name}!</h1>;
});

export default Greeting;

Un componente de React siempre debería tener lógica de renderizado pura. Esto significa que debe devolver la misma salida si sus props, estado, y contexto no han cambiado. Al usar memo, le estás diciendo a React que tu componente cumple con este requerimiento, así React no necesita re-renderizar tu componente siempre y cuando sus props no hayan cambiado. Cuando usas memo, tu componente aún se re-renderizará si su propio estado cambia o si un contexto que usa cambia.

En este ejemplo, fíjate que el componente Greeting se re-renderiza siempre que name es cambiado (porque esa es una de sus props), pero no cuando address es cambiado (porque no es pasado a Greeting como una prop):

Actualizar un componente memorizado usando el estado

Incluso cuando un componente es memorizado, todavía se re-renderizará cuando su propio estado cambie. La memorización solo tiene que ver con las props que son pasadas al componente desde su padre.

Si asignas una variable de estado a su valor actual, React se saltará el re-renderizado de tu componente incluso sin memo. Puede que todavía veas la función de tu componente ser llamada una vez más, pero el resultado será descartado.

Actualizar un componente memorizado utilizando un contexto

Incluso cuando un componente es memorizado, todavía se re-renderizará cuando un contexto que está usando cambie. La memorización solo tiene que ver con las props que son pasadas al componente desde su padre.

Para hacer que tu componente se re-renderice solo cuando una parte de algún contexto cambie, divide tu componente en dos. Lee lo que necesitas del contexto en el componente exterior, y pasalo a un hijo memorizado como una prop.

Minimizar los cambios en las props

Cuando usas memo, tu componente se re-renderiza siempre que cualquier prop no sea superficialmente igual a como era previamente. Esto significa que React compara cada prop en tu componente con el valor previo de esas prop utilizando la comparación Object.is. Fíjate que Object.is(3, 3) es true, pero Object.is({}, {}) es false.

Para aprovechar al máximo memo, minimiza las veces que las props cambian. Por ejemplo, si la prop es un objeto, evita que el padre vuelva a crear ese objeto cada vez usando useMemo:

function Page() {
  const [name, setName] = useState('Taylor');
  const [age, setAge] = useState(42);

  const person = useMemo(
    () => ({ name, age }),
    [name, age]
  );

  return <Profile person={person} />;
}

const Profile = memo(function Profile({ person }) {
  // ...
});

Una mejor manera de minimizar los cambios en las props es asegurarse de que los componentes acepten la infomación mínima necesaria en sus props. Por ejemplo, puede aceptar valores individuales en lugar de un objeto entero:

function Page() {
  const [name, setName] = useState('Taylor');
  const [age, setAge] = useState(42);
  return <Profile name={name} age={age} />;
}

const Profile = memo(function Profile({ name, age }) {
  // ...
});

Incluso los valores individuales pueden a veces ser proyectados a los que cambian con menor frecuencia. Por ejemplo, este es un componente que acepta un boolean para indicar la presencia de un valor en lugar de el propio valor:

function GroupsLanding({ person }) {
  const hasGroups = person.groups !== null;
  return <CallToAction hasGroups={hasGroups} />;
}

const CallToAction = memo(function CallToAction({ hasGroups }) {
  // ...
});

Cuando necesitas pasar una función a un componente memorizado, ya sea declararla fuera de tu componente de esa manera nunca cambia, o useCallback para cachear su definición entre re-renderizados.

Especificar una función comparadora personalizada

En raros casos puede que sea inviable minimizar los cambios de las props de un componente memorizado. En ese caso, puedes proporcionar una función comparadora personalizada, la cual React usará para comparar las props antiguas y las nuevas en lugar de usar igualdad superficial. Esta función es pasada como segundo parámetro a memo. Debería devolver true solo si las nuevas props resultarían en la misma salida que las props antiguas; de lo contrario debería devolver false.

const Chart = memo(function Chart({ dataPoints }) {
  // ...
}, arePropsEqual);

function arePropsEqual(oldProps, newProps) {
  return (
    oldProps.dataPoints.length === newProps.dataPoints.length &&
    oldProps.dataPoints.every((oldPoint, index) => {
      const newPoint = newProps.dataPoints[index];
      return oldPoint.x === newPoint.x && oldPoint.y === newPoint.y;
    })
  );
}

Si haces esto, usa el panel de rendimiento en las herramientas de desarrollo en tu navegador para asegurarte de que tu función comparadora en realidad es más rápida que re-renderizar el componente. Puede que te sorprendas.

Cuando hagas mediciones de rendimiento, asegúrate de que React se está ejecutando en modo producción.

Referencias

memo(Component, arePropsEqual?)

Llama memo afuera de cualquier componente para definir una versión memorizada de un componente. Este componente memorizado usualmente no se re-renderizará siempre y cuando sus props no hayan cambiado. Pero puede que React la re-renderice de todos modos: la memorización es una optimización de rendimiento, no una garantía.

import { memo } from 'react';

function SomeComponent(props) {
  // ...
}

const MemoizedComponent = memo(SomeComponent);

Parámetros

• Component: El componente que quieres memorizar. El memo no modifica este componente, pero devuelve un nuevo componente memorizado en su lugar. Cualquier componente válido de React, incluyendo funciones y componentes forwardRef, es aceptado.

• opcional arePropsEqual: Una función que acepta dos parámetros: las props previas del componente y las nuevas. Debería devolver true si las props antiguas y las nuevas son iguales: es decir, si el componente renderizará la misma salida y se comportará de la misma manera con las nuevas props que con las antiguas. De lo contrario, debería devolver false.

Salidas

memo devuelve un nuevo componente de React. Se comporta de la misma manera que el componente proporcionado a memo excepto que React no siempre lo re-renderizará cuando su padre sea re-renderizado a menos que sus props hayan cambiado.

Solución de problemas

Mi componente se re-renderiza cuando una prop es un objeto, array, o una función

React compara las antiguas y las nuevas props por igualdad superficial: es decir, considera si cada nueva prop tiene la misma referencia que la prop antigua. Si creas un nuevo objeto o array cada vez que el padre se re-renderice, incluso si los elementos individuales son los mismos cada uno, React aún considerará que se ha cambiado. Similarmente, si creas una nueva función cuando renderizas el componente padre, React considerará que ha cambiado incluso si la función tiene la misma definición. Evita esto al simplificar las props o memorizar las props en el componente padre.