React.memo: ¿por qué no se llama a mi función de igualdad?

Tengo un componente principal que representa una colección de hijos basada en una matriz recibida a través de accesorios.

import React from 'react';
import PropTypes from 'prop-types';
import shortid from 'shortid';
import { Content } from 'components-lib';
import Child from '../Child';

const Parent = props => {
  const { items } = props;

  return (
    <Content layout='vflex' padding='s'>
      {items.map(parameter => (
        <Child parameter={parameter} key={shortid.generate()} />
      ))}
    </Content>
  );
};

Parent.propTypes = {
  items: PropTypes.array
};

export default Parent;

Cada vez que itemse agrega un nuevo , todos los niños se vuelven a procesar y estoy tratando de evitarlo, no quiero que se vuelvan a procesar otros niños, solo quiero renderizar el último que se agregó.

Así que probé React.memo en el niño donde probablemente compararé por la codepropiedad o algo así. El problema es que la función de igualdad nunca se llama.

import React from 'react';
import PropTypes from 'prop-types';
import { Content } from 'components-lib';

const areEqual = (prevProps, nextProps) => {
  console.log('passed here') // THIS IS NEVER LOGGED!!
}

const Child = props => {
  const { parameter } = props;
  return <Content>{parameter.code}</Content>;
};

Child.propTypes = {
  parameter: PropTypes.object
};

export default React.memo(Child, areEqual);

Alguna idea de por qué?

reactjs Joana Deluca Kleis
fuente

No registrará nada hasta que se cambien los accesorios. Intenta ajustar los accesorios en tus padres.

usuario amable

tiene un error en la importación 'import Child from' ../Child '' no estoy seguro si esa es la causa.

Afia

Si está tratando de evitar la repetición innecesaria de componentes de sus hijos, debe dar a cada uno una clave única. React tiene una forma muy delicada de manejar las claves, y si la clave de un componente cambia, entonces React lo vuelve a procesar por completo. Si genera una nueva clave cada vez, React volverá a entregar todo cada vez que cambien los accesorios en el padre.

Konstantin

@konstantin eres un genio !! ¡Eliminé la generación de claves y funcionó de maravilla! : D ahora se llama a la igualdad fn y podría hacer la comparación. ¡¡Gracias!! ¿Puedes agregar esto como respuesta para que pueda votar como la correcta?

Joana Deluca Kleis

Me alegro de poder ayudar :), lo agregaré ahora

Konstantin

Respuestas:

En resumen, la razón de este comportamiento se debe a la forma en que funciona React.

React espera una clave única para cada uno de los componentes para poder realizar un seguimiento y saber cuál es cuál. Al shortid.generate()crear un nuevo valor de la clave, se crea la referencia al componente y React piensa que es un componente completamente nuevo, que necesita ser reenviado.

En su caso, en cualquier cambio de accesorios en el padre, React representará a todos los hijos porque las claves serán diferentes para todos los hijos en comparación con el renderizado anterior.

Por favor, haga referencia a esta maravillosa respuesta a este tema

¡Espero que esto ayude!

Konstantin
fuente

No conozco el resto de su biblioteca, pero hice algunos cambios y su código y (principalmente) parece funcionar. Entonces, tal vez, puede ayudarlo a reducir la causa.

https://codesandbox.io/s/cocky-sun-rid8o

Lhew
fuente

Gracias por tomarse su tiempo y por crear esa caja de arena de código. ¡Lo aprecio! Mi caso es un poco diferente, estás cambiando explícitamente la propiedad cuando haces clic en el botón y eso activa el fn. En mi caso, solo estoy agregando un nuevo elemento a la matriz de los padres, creando un nuevo hijo cada vez y esperando que se active el fn. Me acabo de enterar de que el problema era la clave que estaba generando al azar.

Joana Deluca Kleis