0
86
ViewsProblemas de renderización de FlatList nativa de React
Así que tengo esta selección FlatList donde el usuario puede seleccionar un país. Cuando presiono un elemento, tomará un segundo y después del segundo mostrará la marca de verificación.
El problema es el segundo. El usuario no puede esperar un segundo para ver que el país fue seleccionado.
<FlatList keyExtractor={item => item.countryid} data={countryChoices} renderItem={({item}) => { return( <CountryComponent item={item} conditionToCheck={country == item.countryname} onPress={() => setCountry(item.countryname)} /> ) }} /> Esta es mi Flatlist. countryChoices es solo una matriz con diferentes objetos para los países. conditionToCheck comprueba si mostrar u ocultar la marca de verificación. Si el país seleccionado es igual al elemento, se mostrará la marca de verificación.
Pero después de hacer clic en él está tardando demasiado :/
También intenté envolver el elemento FlatList en un useCallback pero no fue (mucho) más rápido
1 answers
Answer question0
Intente pasar el country como extraData en su FlatList ya que el country está fuera de la propiedad de data
<FlatList keyExtractor={item => item.countryid} data={countryChoices} extraData={country} renderItem={({item}) => { return( <CountryComponent item={item} conditionToCheck={country == item.countryname} onPress={() => setCountry(item.countryname)} /> ) }} /> extraData es una propiedad de marcador para indicarle a la lista que se vuelva a procesar (ya que implementa PureComponent ). Si alguna de sus renderItem , Encabezado, Pie de página, etc. depende de algo fuera de la propiedad de data , péguelo aquí y trátelo de manera inmutable.