Best practice comparing react memo areEqual props

Question

A colleague and I were having a discussion. We have a function component we memo. How to best send props to a function component and how to best implement the areEquals compare functions.

We are having a flatlist with a ton of items to render. We want to minimize rerenders and have the best performance possible.

Component call: Is it bad to send many props to a component?

 // Option 1
 <Item
   id={item.id}
   ... about 10 more numbers, string, booleans from item object
   onPress={someOnPress}
 />

 // Option 2
 <Item item={item} onPress={someOnPress} />

The possible areEqual functions

// Option 1 nullafying functions and compare
const propsAreEqual = (prevProps, nextProps) => {
  const newPrevProps = {...prevProps, onPress:null};
  const newNextProps = {...nextProps, onPress:null};
  return _.isEqual(newPrevProps, newNextProps);
}

// Option 2 with json.stringify -> The object attribute order should stay the same order
const propsAreEqual = (prevProps, nextProps) => {
  return JSON.stringify(prevProps) === JSON.stringify(nextProps);
}

What combination (component call + propsAreEqual) is most ideal for performance? Or this there another option?

Given that you have a lot of props, I suppose some must matter more than the others with regards to re-render. Unless you really need to compare all props for re-render, you can focus on the ones that really matter in `propsAreEqual`. Say if re-render is dependent on only two of your props, you can check those two only in `propsAreEqual`. — Fanchen Bao, Mar 03 '23 at 19:22
So you would suggest a custom propsAreEqual with a selection of props to compare instead of compare the whole object with JSON.stringify? — control-panel, Mar 06 '23 at 08:57

Best practice comparing react memo areEqual props

0 Answers0