How to prevent component created from an array from re-rendering whenever the array is changed but t-CodePudding

      <div className="app">
        {[1, 2].map((i) => {
          return <Test key={i} />;
        })}
      </div>

The goal is such that if the array is changed to [2, 3], then the Test component that held the key=2 should not re-render. That's because the key didn't change:

      <div className="app">
        {[2, 3].map((i) => {
          return <Test key={i} />;
        })}
      </div>

Is the above requirement possible?

CodePudding user response：

Yes it is possible using React.memo. It shouldn't rerender if the props are the same.

// Where you define Test for example
const MemoizedTest = React.memo(Test);

...

// Inside your render function
<div className="app">
  {[1, 2].map((i) => {
    return <MemoizedTest key={i} />;
  })}
</div>