0
87
VistasReact Native FlatList Rerender Problems
So I have this selection FlatList where the user can select a country. When I press on a item it's going to take a second and after the second it is displaying the checkmark.
The Problem is the second. The user cannot wait a second to see that the country was selected.
<FlatList
keyExtractor={item => item.countryid}
data={countryChoices}
renderItem={({item}) => {
return(
<CountryComponent
item={item}
conditionToCheck={country == item.countryname}
onPress={() => setCountry(item.countryname)}
/>
)
}}
/>
This is my Flatlist. countryChoices is just an array with different objects for the countries. the conditionToCheck checks wether to show or to hide the checkmark. If the selected Country is equal to the item then it's going to show the checkmark.
But after clicking on it it's taking too long :/
I also tried wrapping the FlatList Item in a useCallback but it wasn't (much) faster
1 Respuestas
Responde la pregunta0
Try passing country as extraData in you FlatList since country is outside of data prop
<FlatList
keyExtractor={item => item.countryid}
data={countryChoices}
extraData={country}
renderItem={({item}) => {
return(
<CountryComponent
item={item}
conditionToCheck={country == item.countryname}
onPress={() => setCountry(item.countryname)}
/>
)
}}
/>
extraData is a marker property for telling the list to re-render (since it implements PureComponent). If any of your renderItem, Header, Footer, etc. functions depend on anything outside of the data prop, stick it here and treat it immutably.