Every list Item is rendered multiple times

[mydesweb]

If we wrap the BigList component with SafeAreaProvider or using react-navigation every list Item is rendered multiple times. Please check this snack https://snack.expo.dev/@mydesweb/safeareaissue

This is bad since it is a negative performance impact.

1. Open the code from your device
2. Check the console logs
3. Shake & Reload button from expo app or remove the app from background and open again
4. You will see unexpected multiple Item renders

Can anybody explain why this is happening?

[lamlengend98]

my biglist doesn't even run to renderItem

[marcocesarato]

Hi, have you tried to use the keyExtractor prop?

[mydesweb]

@marcocesarato yes, just added keyExtractor in Expo snack, same thing.

Open the snack on your Expo iOS app and check the console logs.. without even scrolling the list you will observe that renderItem is called randomly multiple times.

[marcocesarato]

This is a view of the recycle list, so all elements of the items are recycled, the only way to update their states is the prop keyExtractor. Trying to use a console log for items is not the best way to test it (because the list calculates if the item is within the view and not at the top or bottom of the scroll and could be a little bit glitches). Anyway i need more info to test it because if I tried it on the example and for me it works all fine.

[BuiHung1612]

ithout even scrolling the list you will observe that renderItem is called randomly multiple times.

my biglist doesn't even run to renderItem

same issue