React-table: Controlling sorting triggers an infinite effect (useSortBy)

[arjenkroeze]

Describe the bug
Quite hard to explain, that's why I added a CodeSandbox link, but to be as clear as possible; I'm trying to control sorting, so I'm sending the sortBy state in a function that fetches new data.

React.useEffect(() => {
    fetchData({ sortBy });
}, [fetchData, sortBy]);

However, the fetchData-function, which I copied from one of the examples, triggers the sortBy in the state which causes the effect to run again.

I don't know what this triggers, but it seems like it has something to do with the number of inputs in the table. In the CodeSandbox it triggers about every second, but I'm working on a big project with lots of filters and inputs which causes the app to crash due to maximum depth exceeded.

I'm using the 7.0.0.rc-6 version. In the 7.0.0.beta-15 verison this was not an issue.

To Reproduce
See https://codesandbox.io/s/eloquent-kilby-unbv9 (check the Console)

[tannerlinsley]

Have you tried adding manualSortBy: true to your table options? It seems if you are controlling the sorting externally, you will need to do that.

Tanner Linsley
On Dec 10, 2019, 5:30 AM -0700, arjenkroeze [e-mail], wrote:

Describe the bug
Quite hard to explain, that's why I added a CodeSandbox link, but to be as clear as possible; I'm trying to control sorting, so I'm sending the sortBy state in a function that fetches new data.
React.useEffect(() => {
fetchData({ sortBy });
}, [fetchData, sortBy]);
However, the fetchData-function, which I copied from one of the examples, triggers the sortBy in the state which causes the effect to run again.
I don't know what this triggers, but it seems like it has something to do with the number of inputs in the table. In the CodeSandbox it triggers about every second, but I'm working on a big project with lots of filters and inputs which causes the app to crash due to maximum depth exceeded.
I'm using the 7.0.0.rc-6 version. In the 7.0.0.beta-15 verison this was not an issue.
To Reproduce
See https://codesandbox.io/s/eloquent-kilby-unbv9 (check the Console)
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or unsubscribe.

[arjenkroeze]

Oh man, you're right! Seems like I need some glasses. I had manualSorting configured instead of manualSortBy. Forgot to update this with the new version.

Thanks a ton!

[hitendramalviya]

Hay @tannerlinsley this is actually an issue in react-table, when we use this with controlled pagination, check below codesendbox:

https://codesandbox.io/s/relaxed-golick-uq76i

You can see it is keep on executing effect even though sorting not triggered.

[hitendramalviya]

Hay @tannerlinsley this is actually an issue in react-table, when we use this with controlled pagination, check below codesendbox:

https://codesandbox.io/s/relaxed-golick-uq76i

You can see it is keep on executing effect even though sorting not triggered.

Please ignore my comment, I did silly job & somehow I forgot to put manualSortBy in props. after setting it correct all works as expected.