React.memo - por que minha função de igualdade não está sendo chamada?

Eu tenho um componente pai que processa uma coleção de filhos com base em uma matriz recebida via adereços.

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;

Toda vez que um novo itemé adicionado, todos os filhos são renderizados novamente e eu estou tentando evitar isso. Eu não quero que outros filhos sejam renderizados novamente. Apenas quero renderizar o último que foi adicionado.

Então, tentei React.memo na criança em que provavelmente compararei pela codepropriedade ou algo assim. O problema é que a função de igualdade nunca é chamada.

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);

Alguma idéia do porquê?

Em resumo, o motivo desse comportamento é devido ao modo como o React funciona.

O React espera uma chave exclusiva para cada um dos componentes, para que ele possa acompanhar e saber qual é qual. Ao usar shortid.generate()um novo valor da chave, é criada, a referência ao componente é alterada e o React pensa que é um componente completamente novo, que precisa ser renderizado novamente.

No seu caso, em qualquer alteração de objetos no pai, o React renuncia todos os filhos porque as chaves serão diferentes para todos os filhos em comparação com a renderização anterior.

Consulte esta maravilhosa resposta a este tópico

Espero que isto ajude!

Não conheço o resto da sua biblioteca, mas fiz algumas alterações e seu código e (principalmente) parece funcionar. Então, talvez, isso possa ajudá-lo a diminuir a causa.

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