onFetchData fires at the wrong time

What version of React-Table are you using?

"react-table": "^6.8.6",

What bug are you experiencing, or what feature are you proposing?

I’m using a completely controlled component, and redux to hold my pages. When we click “next”, onFetchData fires too early and it fetches the same page we already currently have.

Not sure why onFetchData is firing when the page isn’t changing, it seems to always fire if we just click “next” or “previous”.

               <ReactTable
                  data={this.state.data}
                  filterable={true}
                  pages={this.state.numPages}
                  columns={columns}
                  footerClassName={css(styles.tableFooter)}
                  defaultPageSize={folder.options.pageSize}
                  page={folder.options.page}
                  onPageSizeChange={(pageSize) => {
                    folderActions.updateOptions({
                      pageSize: pageSize,
                      page: (folder.options.pageSize * this.state.numPages) > (pageSize * folder.options.page) ? folder.options.page : 0
                    });
                  }}
                  onPageChange={(pageIndex) => {
                    folderActions.updateOptions({page: pageIndex})
                  }}
                  minRows={0}
                  manual
                  onFetchData={(state, instance) => {
                      this.pagination(state);
                  }}
                />

Currently don’t have a sandbox but can provide when needed.

[lightninglu10]

So I looked into your guys’ code, and it seems that the issue is this:

https://github.com/react-tools/react-table/blob/master/src/methods.js#L431-L439

Even though I’ve defined onPageChange and my own page prop, this onPageChange, which then calls this:

https://github.com/react-tools/react-table/blob/fcdc3d88bc8848ca18c66c9383f1772e5e28f8d1/src/methods.js#L6-L12

Which doesn’t update the state properly with my page prop and then onFetchData will fire.

Looking into it and working on a PR for this right now.

[Motistudio]

In case someone’s facing this issue now, I had a bit of trouble with it not too long ago with making the table controlled. The problem with combining onPageChange and onFetchData is that they called in a sync order. That means that when you want to manage the pages with a state, you miss the data fetching because setState is asynchronous and onFetchData will start before the page had changed. A nice workaround I did was making a proxy for onFetchData - I wrapped it with setTimeout of 0 to activate onFetchData. That way it’s set in the event-loop’s queue after the async page set, so it will be fired when the page had been set.