CODEWITHSUNDEEP
reactjsreact-native
finferflu
finferflu

Reputation: 1378

React Native: setState() does not re-render FlatList child component

In short, I have been following a tutorial found here.

It makes sense and it works, however, I have trouble understanding why the FlatList component needs to be assigned a prop to which a state is associated in order to re-render it when the state changes. If I omit the extraData prop as per the example, the FlatList doesn't get re-rendered. I thought setState() was supposed to re-render a component and all its children, but it doesn't in this instance: am I missing something here?

Thank you.

Upvotes: 1

Views: 999

Answers (2)

finferflu
finferflu

Reputation: 1378

After reading more attentively the documentation for the FlatList component (thanks, @Lucas Reppe Welander), it has emerged that a FlatList is not a regular component, but it's actually a PureComponent. That means that even if the parent component's state changes, the FlatList's "prop comparison will not show any changes", because PureComponent "implements shouldComponentUpdate() with a shallow prop and state comparison". I'm not entirely sure about all the intricacies this entails, but it's enough for me to understand why I need to use the extraData prop in this instance.

Upvotes: 1

larv
larv

Reputation: 938

if you take a look at this page https://facebook.github.io/react-native/docs/flatlist.html

you can see they are setting the state.selected, but i can't see that you/him are doing that in that tutorial, maybe its the this.state.selected that isnt set as a property?

i think you'll need to add the selected to state in your onSelectItem() method as this:

onSelectItem: (item) => {
    console.log('onSelectItem ', item);
    this.setState({
        selected: item
    });
},

Upvotes: 2

Related Questions