Render Separator should use React.memo

[hirbod]

https://github.com/gorhom/react-native-sticky-item/blob/master/src/StickyItemFlatList.tsx#L194

Since it should be a „Pure Component“. I would also think that the second parameter for „arePropsEqual“ could always return true in this case.

After I memoized this I could finally get rid of this VirtualizedList is large and slow to update message.

@gorhom

[hirbod]

Maybe like so

function separatorPropsEqual() {
  return true;
}
const renderSeparator = React.memo(
  () => <View style={{ width: SEPARATOR_SIZE }} />,
  separatorPropsEqual,
);

[gorhom]

hi @Hirbod , i'll work on it this weekend

[hirbod]

Maybe the separator should also be overwritable? And I am still feeling like decelerationRate should also be overwritable.

[gorhom]

@Hirbod have you tried to optimising the flatlist with windowSize & maxToRenderPerBatch ?

[hirbod]

@gorhom yes, but after diggin through a lot of posts I found out that also separator should be a Pure/Memoized Component

[gorhom]

okay, i can see the importance of this, i'll push it with the next release 👍

[hirbod]

Thanks. You could actually copy over my snippet (and format to your needs). Its working fine. Still thinking if passing own separator is important or not but I don't think that it should be, since the size is adjustable

[gorhom]

hmm i'll investigate it more, however for having a memoized separator, you could submit a pr :)

[hirbod]

Sure.

[hirbod]

PR sent #9

[gorhom]

thanks , i'll review it now :)

[hirbod]

I think the equal function check should be moved outside of the functional component

[gorhom]

released with v1.3.0