React-table: onFetchData fires at the wrong time

[lightninglu10]

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.

[pinkynrg]

I'm experiencing the same problem: sometimes I do a page change and it doesn't properly trigger.

onFetchData seems to be called with the old value of state.page.

I am using a reactTable for data coming from server but I'm not fully controlling the component as lightninglu10.

<ReactTable
  {...this.props}
  manual={true}
  sortable={false}
  filterable={false}
  showPaginationTop={true}
  showPaginationBottom={true}
  loading={this.state && this.state.loading}
  onFetchData={this.onFetchData.bind(this)}>
    {(state, makeTable, instance) => {
      return (
        <div className={dark ? "ReactTableContainer Dark" : "ReactTableContainer"}>
          <div className="react-table-extension">
            <div className="react-table-title">
              {title}
            </div>
            <div className="react-table-search">
              <label>Search </label>
              <input onChange={this.onSearchChange.bind(instance)} type="text"/>
            </div>
          </div>
          { makeTable() }
        </div>
      )
    }}
</ReactTable>

[lipedeitos]

Hi, I'm also facing the same problem i guess.
I'm using ReactTable and controlling state with Mobx.

```
columns={toJS(columns)}
data={data}
page={page}
pages={pages}
pageSize={pageSize}
onPageChange={setPage}
onPageSizeChange={setPageSize}
loading={loadingReactTable}
onFetchData={this._fetchDataSendingProps}
className={reactTableClasses}
manual={manual}
/>

_fetchDataSendingProps = (state, instance) => {
const { data } = this.props;
this.store.fetchData({ data, state, instance });
};

// Store
@action
setPage = (page) => {
this.page = page;
};
```

The case is:

1. Current page is 0
2. Click "Next"
3. ReactTable calls onPageChange (With var page 1) and also calls onFetchData (With var page 0)
4. My function setPage fires, setting observable page in my store to 1
5. The page render and ReactTable receive page={1}, calling another onFetchData (This time with page 1)

_Workround for now_ is: implement my own pagination, so when i click my own buttons it doesn't trigger onFetchData, just use my store setPage and the ReactTable receives the page props when render occurs.

I guess whats happening is that ReactTables fires the onFetchData in both situations, when the user click on _prev or next_ and when the ReactTable receives a differente _page_ props, to solve this maybe the onFetchData must occurs only in one of those 2 situations.

[lipedeitos]

Reading the https://github.com/react-tools/react-table/issues/837, I guess I was doing it wrong, don't need to use both _onFetchData_ and _onCallbacks_, to have full control of my ReactTable, probably should use only the callbacks and forget about onFetchData.

[tannerlinsley]

This feature/issue has been tagged as one that will likely be fixed or improved in the next major release of React-Table. This release is expected to be completed in the next 6 - 8 months. Please see #1143 for more detail. If you believe this feature can be easily fixed, we invite you to fork the project, attempt the fix, and use it until the latest version is available. If the fix is simple enough, we will also consider it as a PR to the current version.

[JoshMcCullough]

@lightninglu10 FYI I've opened a similar but (#1230) and a potential PR here if you are interested in reviewing: https://github.com/react-tools/react-table/pull/1231

@tannerlinsley Would love to get this merged in if you agree it is a decent fix. We are running into this issue all over the place currently.

[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.