Entiendo que FlatList extraData prop se usa para volver a renderizar componentes cuando cambia.
Entonces, imagina este ejemplo:
import React from 'react'; import { View, TouchableOpacity, Text, FlatList } from 'react-native'; export default function App() { const [selectedId, setSelectedId] = React.useState(null); const items = [ { id: 'some-unique-id', title: 'Item 1', }, ]; const renderItem = ({ item }) => { return ( <SelectableItem selected={selectedId === item.id} onPress={() => setSelectedId(item.id)} /> ); }; return ( <FlatList data={items} renderItem={renderItem} keyExtractor={(item) => item.id} extraData={selectedId} // works the same if I remove this /> ); } function SelectableItem({ selected, onPress }) { return ( <TouchableOpacity style={{ backgroundColor: selected ? 'red' : 'white' }} onPress={onPress}> <Text>Click Me!</Text> </TouchableOpacity> ); }Lo he implementado pensando en volver a renderizar el componente cuando cambia el estado de FlatList...
Pruébelo aquí .
Pero, el código funciona igual si elimino la propiedad de datos extra... ¿por qué?
Como sugiere el documento.
Al pasar extraData a FlatList, nos aseguramos de que FlatList se vuelva a representar cuando el estado. cambios seleccionados. Sin configurar esta propiedad, FlatList no sabría que necesita volver a renderizar ningún elemento porque también es un PureComponent y la comparación de la propiedad no mostrará ningún cambio.
Creo que se debe a que su estado está cambiando, los componentes se actualizan, pero en todos los casos, no es posible, como si desea cambiar la matriz y no afecta el estado, el componente no se actualizará y la lista plana será la mismo. Estamos utilizando un accesorio de datos adicional para notificar a la lista plana que los datos han cambiado y que deberían volver a procesarse.