React.memo - warum wird meine Gleichstellungsfunktion nicht aufgerufen?

Ich habe eine übergeordnete Komponente, die eine Sammlung von untergeordneten Elementen basierend auf einem über Requisiten empfangenen Array rendert.

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;

Jedes Mal, wenn ein neues itemhinzugefügt wird, werden alle Kinder neu gerendert, und ich versuche dies zu vermeiden. Ich möchte nicht, dass andere Kinder neu gerendert werden. Ich möchte nur das zuletzt hinzugefügte rendern.

Also habe ich React.memo an dem Kind ausprobiert, wo ich es wahrscheinlich anhand der codeEigenschaft oder so vergleichen werde . Das Problem ist, dass die Gleichheitsfunktion niemals aufgerufen wird.

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

Irgendwelche Ideen warum?

Kurz gesagt, der Grund für dieses Verhalten liegt in der Funktionsweise von React.

React erwartet für jede der Komponenten einen eindeutigen Schlüssel, damit es den Überblick behalten und wissen kann, welcher welcher ist. Durch die Verwendung shortid.generate()eines neuen Werts des Schlüssels wird der Verweis auf die Komponente geändert und React glaubt, dass es sich um eine völlig neue Komponente handelt, die erneut gerendert werden muss.

In Ihrem Fall rendert React bei jeder Änderung der Requisiten im übergeordneten Element alle untergeordneten Elemente, da die Schlüssel für alle untergeordneten Elemente im Vergleich zum vorherigen Rendering unterschiedlich sind.

Bitte verweisen Sie auf diese wunderbare Antwort auf dieses Thema

Hoffe das hilft!

Ich kenne den Rest Ihrer Bibliothek nicht, aber ich habe einige Änderungen vorgenommen und Ihr Code scheint (meistens) zu funktionieren. Vielleicht kann es Ihnen helfen, die Ursache einzugrenzen.

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