CODEWITHSUNDEEP
listviewreact-nativereduxthunk
ssomnoremac
ssomnoremac

Reputation: 759

Redux ListView doesn't rerender content after action dispatch

I'm using redux almost exactly like the async reddit redux example, using thunk middleware to only update the state if needed (shouldFetch). Has anyone noticed that a React-Native ListView doesn't catch the change after a network call updates the store? If I navigate away and back it appears fine. It's just after a network call (from the previous route) that it doesn't appear.

My ListView.js

constructor(props) {
  super(props)
  let dataSource = new ListView.DataSource({
    sectionHeaderHasChanged: this.sectionHeaderHasChanged,
    rowHasChanged: (row1, row2) => row1 !== row2,
  });

  this.state = {
    dataSource: dataSource.cloneWithRows(this.props.books),
  }

  this.renderRow = this.renderRow.bind(this);
  this.selectBook = this.selectBook.bind(this);
}

selectBook(book) {
  this.props.selectBook(book)
}

goTo(route) {
  this.props.navigator.push({
    name: route,
  });
}
... + everything you'd expect

Upvotes: 1

Views: 1160

Answers (1)

HungrySoul
HungrySoul

Reputation: 1231

The major understanding here is that the listview elements like flatlist and sectionlist are pureComponent, meaning they won't re-render when the props change. So, to overcome this we need to pass an extra field to the listview component namely "extraData". Please refer this link for detailed doc.

Bonus point https://reactnative.dev/docs/performance#listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists

Upvotes: 0

Related Questions