React-table: Server side data processing infinite loop

[Raphael67]

Hi,

I'm currently using react-table version 6.5.3 and trying to move to server side data processing. I have added the prop manual and implemented onFecthData.

My problem is that the table pulls the data in an endless loop even if no filter, page, sort or anything else has been updated. After some investigation I found that in lifecycle.js fireFetchData is always triggered:

``javascript return this.setState(newResolvedState, () => { cb && cb() if ( oldState.page !== newResolvedState.page || oldState.pageSize !== newResolvedState.pageSize || oldState.sorted !== newResolvedState.sorted || oldState.filtered !== newResolvedState.filtered ) { this.fireFetchData() } }) ```` It appears thatoldState.sorted !== newResolvedState.sorted` return true even when these objects have the same properties. Here are the dump in chrome console:

```javascript
// oldState.sorted
[{id: "update_timestamp", desc: true}]
// newResolvedState.sorted
[{id: "update_timestamp", desc: true}]
````
A workaround could be to compare JSON.stringify() of both. Does it make sense or am I missing the point here ?
Thank you for your feedback.

[Raphael67]

This might come from my implementation.
I have a default configuration for the table (sort, filter, column width, column hidden ...) which is overriden by a user configuration object. To simplify the state manipulation I clone the resulting object and inject it back to the react-table at each render.

So this is a specific implementation issue but I think a shallow comparison here is not enough.

[swp44744]

@Raphael67 I also faced similar situation, if I use redux store and make server call via action, pass the data to reducer and then access the data through mapStateToProps and feed it to the react table then react table makes infinite api calls in a loop.
If I maintain the state locally and make server call within component and update the state then it works fine.

[Raphael67]

@swp44744 do you mind to try if my fork fix your issue ? for convenience I pushed a branch with the compiled version. You should be able to use it in your project by adding this line in your package.json:
```javascript
...
"dependencies": {
"react-table": "https://github.com/Raphael67/react-table.git#build",
...
}
````
Be sure that the react-table module has been overwritten with this version.

[swp44744]

@Raphael67 Sure I will try your fix and let you know!!

[swp44744]

@Raphael67 Hey your fix worked just fine for me..!! thank you.. any plans to merge your code changes???

[tannerlinsley]

We're glad you were able to find a workaround for the time being. The intended usage is to store sorted and filtered as stateful immutable objects. There have been previous issues about this, and is easily solved by not constructing these object on-the-fly in their corresponding props.

Simple fix for both sorted and filtered

constructor () {
  this.state = {
    sorted: [...]
  }
}
updateSorted (newSorted) {
  // if you want to updated sorted, use this.setState
  this.setState({
    sorted: newSorted
  })
}
render () {
  return <ReactTable
    sorted={this.state.sorted}
  />
}