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: 
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>
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} />;
}

```