title: React.memo large array of nested objects, proposed way of making comparison efficient, using change tracking id
body: <p>i have a react component that takes an array of complex objects and does some expensive computation with them.</p>
  <p>I want to use React.memo to avoid re rendering if the arrays have not changed.</p>
  <p>deep compare may be expensive.</p>
  <p>i have thought of a way of checking if the array has changed and am wondering why i cant find any examples of people using the method, as it seems like such a simple solution.</p>
  <p>perhaps i am missing a reason why i shouldnt use the method?</p>
  <p>is this a commonly used technique?</p>
  <p>i know i can JSON.stringify the objects then compare them, is that not potentially expensive if the objects are large?</p>
  <p>i want to change a unique id field on the object any time any of the values in the object changes</p>
  <p>e.g.</p>
  <pre class="lang-js prettyprint-override"><code>const arrayOfLargeObjects = [obj1,obj2,obj3,.....and so on]
  
  if 
  
  obj1 = {letter: a, moreNestedStuff: {blah blah},memoizationid: '1'}//id is longer in actual implementation
  
  changes to 
  
  obj1 = {letter: b, moreNestedStuff: {blah blah},memoizationid: '2'}
  
  //this is all done imutabily details left out for brevity
  
  const stringify = (obj)=&gt;obj.map(el.memoizationid).join('')
  
  const comparisonFunction = (a,b)=&gt;stringify(a)===stringify(b)
  
  &lt;MyComponent myArray={arrayOfLargeObjects}/&gt;
  
  React.memo(MyComponent, comparisonFunction);
  </code></pre>