Best practice comparing react memo areEqual props

180 views Asked by At

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?

0

There are 0 answers