React.memo-なぜ等値関数が呼び出されないのですか？

小道具を介して受信した配列に基づいて子のコレクションをレンダリングする親コンポーネントがあります。

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;

新しいものitemが追加されるたびに、すべての子が再レンダリングされ、それを回避しようとしています。他の子が再レンダリングされたくないので、最後に追加された子をレンダリングしたいだけです。

だから、私は子供でReact.memoを試してみましたが、おそらくcodeプロパティか何かで比較します。問題は、等価関数が呼び出されないことです。

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

何かアイデアはありますか？

つまり、この動作の理由は、Reactの動作方法にあります。

Reactは各コンポーネントに一意のキーを期待しているので、追跡してどれがどれかを知ることができます。shortid.generate()キーの新しい値を使用することにより、コンポーネントへの参照が変更され、Reactはそれを完全に新しいコンポーネントであると見なし、レンダリングが必要になります。

あなたの場合、親のプロップが変更されると、前のレンダーと比較してすべての子のキーが異なるため、Reactはすべての子を再レンダリングします。

このトピックに対するこの素晴らしい答えを参照してください

お役に立てれば！

私はあなたのライブラリの残りを知りませんが、私はいくつかの変更とあなたのコードを行いました、そして（ほとんど）動作しているようです。だから、多分、それはあなたが原因を絞り込むのを助けることができます。

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