Ad

Initialize An Array In React Component Render (in Terms Of Performance)

- 1 answer

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?

Ad

Answer

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} />;
);
Ad
source: stackoverflow.com
Ad