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.

// adapted from

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

const items = [
        id: "some-unique-id",
        title: "Item 1"

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

    keyExtractor={(item) =>}extraData={selectedId}


Muhammad Swalah

A passionate individual who dream in code to revolutionize the digital solutions. Entrepreneur | Java Enthusiast | Code Dreamer | KeralaJUG Lead