Rerendering FlatList with extraData

DevTips Nov 11, 2020

React Native FlatList is a PureComponent, and it will not rerender its items if you're making shallow changes to the props. The same applies to the state variable the list-item depends.

So what can you do?

Yes, extraData is there to rescue!!!

You can pass any depended variable outside the data property to the marker prop extraData.

eg:
// adapted from reactnative.dev/docs/flatlist

const [selectedId, setSelectedId] = useState(null);

const items = [
    {
        id: "some-unique-id",
        title: "Item 1"
    }
];

// will have some logic based on selectedIdconst 
renderItem = ({ item }) => {
    return(.....);
}

<FlatList
    data={DATA}
    renderItem={renderItem}
    keyExtractor={(item) => item.id}extraData={selectedId}
/>