在 React 组件渲染中初始化一个数组（在性能方面）

Question

It is known that we should not use anonymous functions in render because they will be re-create on each render. But what about an array of objects like this:

// name props is passed in so it seems like there is a point in initializing the array inside the component
const Component = ({ name }) => {
  // let's imagine there is a lot of large objects
  const bigArray = [{id: 1, name}, {id: 2, name}];

  return <AnotherComponent data={bigArray} />;
}

I suppose that arrays (and objects inside) are stored by reference so when the component is re-rendered, the interpreter sees that this is the same reference and won't re-create the array. Is my assumption correct?

Answer 1

No, it's not the same reference. You're creating new array with new objects inside on each render. If it's completely static, you can extract it from your function to keep the same ref:

const name = 'some-name';
const bigArray = [{id: 1, name}, {id: 2, name}];

const Component = () => (
   <AnotherComponent data={bigArray} />;
);

But in your case this array generated from prop. You can use useMemo() hook to optimize it:

const Component = ({ name }) => (
  const bigArray = useMemo(
    () => [{id: 1, name}, {id: 2, name}],
    [ name ]
  );

   <AnotherComponent data={bigArray} />;
);

Answer 2

Unfortunately when using a React.Component or React.FunctionnalComponent it seems that every single change will re-render the complete array.

We can consider using a React.PureComponent as a workaround of this issue, more infos here: https://codeburst.io/react-array-re-render-performance-ee23f34c5d66

Answer 3

It is better if you move bigArray then (considering it does not change) to a more global state.

// let's imagine there is a lot of large objects
const bigArray = [{id: 1, name}, {id: 2, name}];

// name props is passed in so it seems like there is a point in initializing the array inside the component
const Component = ({ name }) => {
  return <AnotherComponent data={bigArray} />;
}