React-table: upgrading to react 16.12.0 breaks Group By

[ggascoigne]

I upgraded the kitchen sink example to react-table beta.14 (that worked fine), then I upgraded react and react-dom to 16.12.0.

The app starts up just fine, but clicking on the groupBy icon (the fist) for First Name, causes the app to hang and this message to be displayed in the console.

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    in Table (at App.js:622)
    in div (created by Context.Consumer)
    in StyledComponent (created by App__Styles)
    in App__Styles (at App.js:620)
    in App (at src/index.js:7)

The only changes to the app are these package.json changes:

 "dependencies": {
    "match-sorter": "^4.0.1",
    "namor": "^1.1.2",
    "react": "^16.12.0", // <-
    "react-dom": "^16.12.0", // <-
    "react-scripts": "3.0.1",
    "react-table": "^7.0.0-beta.14", // <-
    "styled-components": "^4.3.2"
  },

and the associated yarn.lock file.

[AtomicSimon]

I'm hitting a similar issue with usePagination

[FredyC]

Yea, same here, a combination of pagination and grouping is wild.

https://codesandbox.io/s/tannerlinsleyreact-table-pagination-ezq8r

The only two changes from the original is adding useGroupBy on line 66 of App.js and initialState with groupBy. Click on any pagination control and it goes to page 1 and gets stuck after that.

@ggascoigne Seems unrelated to React version upgrade, the sandbox is still at 16.8. Can you please change the title to a more generic one? Eg. Combination of useGroupBy & usePagination is broken

Edit: Although you are right that upgrading the kitchen sink to 16.12 breaks the whole thing, it doesn't render anything for me at all.

[androsj]

@ggascoigne I just checked the kitchen example and it's hanging just like you described. That's with beta.14.

I reverted to beta.13 and it starts working again.

[iamjon]

Any chance it's related to this?
https://github.com/tannerlinsley/react-table/pull/1610

[tannerlinsley]

Likely not. I'll debug this as soon as I can.

[ggascoigne]

I'd like to reopen this, the kitchen-sink example still shows the same behavior with beta.15.

[FredyC]

Yea, reproduction I posted above also applies to beta.15.

[iamjon]

I also noticed it's happening when useGroupBy, useExpanded are used along with usePagination or useRowSelect

[androsj]

Yeah you are right guys. The kitchen sink sandbox still haves that issue... It is quite strange because I was having the same issue on my personal project and it's now gone with beta15. And I've basically replicated most of that example (I'm using all the plugins)

[androsj]

Fix is on the way my friends. Row select is also listening to rows.

[androsj]

It wasn't affecting me since I'm passing my own deps for rowSelect. New pull request should finally do the trick.

[FredyC]

@androsj Perhaps I am misunderstanding something, but how is the rowSelect related to issue with a combination of groupBy and pagination? :)

[androsj]

@FredyC The real issue was in both usePagination & useRowSelect.

They both have an effect to reset some state, and as you may know, effects run every time one of the deps changes. Well, they both had rows as a dep, and these rows are re-created on every render (unlike data), causing the effect to run infinitely (on every render).

[tannerlinsley]

I’ve got this fix staged locally along with a bunch of other things. Stay tuned

Tanner Linsley
On Nov 29, 2019, 1:48 PM -0700, Andros Rosa Llop [e-mail], wrote:

@FredyC The real issue was in both usePagination & useRowSelect.
They both have an effect to reset some state, and as you may know, effects run every time one of the deps changes. Well, they both had rows as a dep, and these rows are re-created on every render (unlike data), causing the effect to run infinitely (on every render).
—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub, or unsubscribe.

[ggascoigne]

FYI I can confirm that this is fixed for me using beta.19. Thank you.

[KatamariJr]

This fix seems to have been undone at some point, v7.0.0 has this error occur once again. Going back to v7.0.0-beta.19, as suggested in this thread, has proper functionality. In my testing, it seems that v7.0.0-rc.1 is the last tag that works as intended without a 'maximum update depth' error.

[keebeegee]

This fix seems to have been undone at some point, v7.0.0 has this error occur once again.

Using [email protected]:
v7.0.0 is throwing "Maximum update depth exceeded"
vv7.0.0-beta.19 seems to work fine

[santamaria7]

This issue still exist in v7.1.0. usePagination leads to Maximum update depth exceeded error.
Since i'm using [email protected], I had to rollback to v7.0.0-beta.19.