React-native FlatList not rerendering row when props change

Question

I\'m having an issue with the new FlatList component. Specifically, it does not rerender it\'s rows, even though props that the row is dependent on changes.

---

The F

Answer 1

I agree with Nimelrian. Also, If your state is an Array you could create an Array Object from the state by doing:

 var oldReportCopy = Object.assign([], this.state.report);

Then use the .push() method to add your new object to it like this:

oldReportCopy.push(selectedCategory);

you can then set this new Array Object back to state:

this.setState({ report: oldReportCopy });

Answer 2

Look at line #4

_onCategoryChosen = category => {
    var oldReportCopy = this.state.report;
    oldReportCopy.selectedCategory = category;
    this.setState({ report: [...oldReportCopy] }); // Notice this line
  };

Answer 3

Simply you can solve this problem passing props to extraData in flat list component like this,

  <FlatList
    data={this.props.data}
    extraData={this.props}
    keyExtractor={this._keyExtractor}
    renderItem={this._renderItem}
  />

Answer 4

Maybe this won't be the case for anyone else but I realized I was only having trouble when the array of items being rendered by the FlatList became empty. In my case I just needed to not render the FlatList at all, and instead render a different View in its place, and that of course fixed my issue with it "not re-rendering".

Answer 5

In my case I just made a simple mistake when using keyExtractor

I changed

keyExtractor={(item, index) => index.toString()} 

To

keyExtractor={(item, index) => item.key} 

I was seeing some strange effect after filtering my list where props of filtered out components were being rendered in place of new component's props, my hunch is that because I was using the index of the array rather than a unique key, I was just passing the old props to the new component even though the base component was in fact changing.

Answer 6

The problem here lies within the fact that

1. You are mutating an existing slice of state instead of creating a mutated copy

---

_onCategoryChosen = category => {
    var oldReportCopy = this.state.report; // This does not create a copy!
    oldReportCopy.selectedCategory = category;
    this.setState(Object.assign({}, this.state, { report: oldReportCopy }));
};

This should be

_onCategoryChosen = category => {
    var oldReportCopy = Object.assign({}, this.state.report);
    oldReportCopy.selectedCategory = category;
    // setState handles partial updates just fine, no need to create a copy
    this.setState({ report: oldReportCopy });
};

---

2. The props of FlatList remain the same, your _renderRow function may rely on the selectedCategory prop which does change (If not for the first mistake), but the FlatList component does not know about that. To solve this, use the extraData prop.

   <FlatList
     data={this.props.items.categories.edges}
     renderItem={this._renderRow}
     horizontal={true}
     keyExtractor={(item, index) => item.node.id}
     extraData={this.props.selectedCategory}
   />