React.memo large array of nested objects, proposed way of making comparison efficient, using change tracking id

Viewed 203

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);
0 Answers
Related