memo

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

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

Referencia

memo(Component, arePropsEqual?)

Envuelve un componente en memo para obtener una versión memoizada de ese componente. Esta versión memoizada de tu componente usualmente no se rerenderizará cuando su componente padre se rerenderice siempre y cuando sus props no hayan cambiado. Pero puede que aún así React la rerenderice: la memoización es solo una optimización de rendimiento, no una garantía.

import { memo } from 'react';

const SomeComponent = memo(function SomeComponent(props) {
  // ...
});

Parámetros

• Component: El componente que quieres memoizar. El memo no modifica este componente, pero devuelve un nuevo componente memoizado 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.

Devuelve

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 rerenderizará cuando su padre sea rerenderizado a menos que sus props hayan cambiado.

Uso

Saltar el rerenderizado cuando las props no han cambiado

React normalmente rerenderiza un componente siempre que su padre se rerenderiza. Con memo, puedes crear un componente que no se rerenderizará cuando su padre se rerenderice siempre y cuando sus nuevas props sean las mismas que sus antiguas props. Dicho componente se dice que está memoizado.

Para memoizar 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>Hello, {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 rerenderizar tu componente siempre y cuando sus props no hayan cambiado. Cuando usas memo, tu componente aún se rerenderizará si su propio estado cambia o si un contexto que usa cambia.

En este ejemplo, fíjate que el componente Greeting se rerenderiza siempre que se cambia name (porque esa es una de sus props), pero no cuando se cambia address (porque no se pasa a Greeting como una prop):

Actualizar un componente memoizado usando el estado

Incluso cuando un componente es memoizado, todavía se rerenderizará cuando su propio estado cambie. La memoizació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 rerenderizado de tu componente incluso sin memo. Puede que todavía veas que la función de tu componente se llame una vez más, pero el resultado será descartado.

Actualizar un componente memoizado utilizando un contexto

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

Para hacer que tu componente se rerenderice 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 pásalo a un hijo memoizado como una prop.

Minimizar los cambios en las props

Cuando usas memo, tu componente se rerenderiza 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 esa 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 informació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 booleano 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 memoizado, o bien declárala fuera de tu componente y de esa manera nunca cambia, o bien utiliza useCallback para cachear su definición entre rerenderizados.

Especificar una función comparadora personalizada

En raros casos puede que sea inviable minimizar los cambios de las props de un componente memoizado. En ese caso, puedes proporcionar una función comparadora personalizada, que 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 rerenderizar el componente. Puede que te sorprendas.

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

Solución de problemas

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

React compara las props antiguas y las nuevas con 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 rerenderice, 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 memoizar las props en el componente padre.