i have a react component that takes an array of complex objects and does some expensive computation with them.
I want to use React.memo to avoid re rendering if the arrays have not changed.
deep compare may be expensive.
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.
perhaps i am missing a reason why i shouldnt use the method?
is this a commonly used technique?
i know i can JSON.stringify the objects then compare them, is that not potentially expensive if the objects are large?
i want to change a unique id field on the object any time any of the values in the object changes
e.g.
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)=>obj.map(el.memoizationid).join('')
const comparisonFunction = (a,b)=>stringify(a)===stringify(b)
<MyComponent myArray={arrayOfLargeObjects}/>
React.memo(MyComponent, comparisonFunction);