search

tokkozhin / react-native-qrcode-styled

Fully customizable QR Codes generator for React Native
MIT License
156 stars 7 forks source link

Performance recommendation #9

Closed Noitidart closed 4 months ago

Noitidart commented 4 months ago

Hi, thanks for this great lib. It's very powerful. I am hoping to move from the unmaintained react-native-qrcode-svg to this lib. However when I tried it, rendering is much more intensive. Is there any advice to get good performance?

This was my old code:

import QRCode from 'react-native-qrcode-svg';

<QRCode value="uuid_goes_here" size={96} />

This is my code when trying this lib:

import QRCode from 'react-native-qrcode-styled';

<QRCode data="uuid_goes_here" height={96} width={96} />
tokkozhin commented 4 months ago

@Noitidart Yes, you are right, this can happen if you had a lot of re-renders. In 0.3.2 I added some memoization, but if you will use renderCustomPieceItem, please memoize it and use it with useCallback. Thanks for you recommendation!

tokkozhin commented 4 months ago

Also, as an alternative way, you can memoize your entire qrcode component

Noitidart commented 4 months ago

Thank you! I will test it out. I think it was causing such a lag on first render though, as my modal enterance animation was dropping frames when it contained qr code. I will test and share if memoization helped that.