table: upgrading to react 16.12.0 breaks Group By

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.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 18 (7 by maintainers)

Commits related to this issue

[Fix] defaultGetResetPageDeps should listen to data, not rows (#1658) Related to: https://github.com/tannerlinsley/react-table/issues/1657 Discussion: https://spectrum.chat/react-table/general/v7-... — committed to TanStack/table by androsj 5 years ago
[Fix] defaultGetResetPageDeps should listen to data, not rows (#1658) Related to: https://github.com/tannerlinsley/react-table/issues/1657 Discussion: https://spectrum.chat/react-table/general/v7-... — committed to aarudenko99/react-datagrid by androsj 5 years ago
[Fix] defaultGetResetPageDeps should listen to data, not rows (#1658) Related to: https://github.com/tannerlinsley/react-table/issues/1657 Discussion: https://spectrum.chat/react-table/general/v7-... — committed to aarudenko99/react-datagrid by androsj 5 years ago
[Fix] defaultGetResetPageDeps should listen to data, not rows (#1658) Related to: https://github.com/tannerlinsley/react-table/issues/1657 Discussion: https://spectrum.chat/react-table/general/v7-... — committed to opensource521/react-table-maker by androsj 5 years ago
[Fix] defaultGetResetPageDeps should listen to data, not rows (#1658) Related to: https://github.com/tannerlinsley/react-table/issues/1657 Discussion: https://spectrum.chat/react-table/general/v7-... — committed to zach393/reactTable by sunil-dev8 5 years ago
[Fix] defaultGetResetPageDeps should listen to data, not rows (#1658) Related to: https://github.com/tannerlinsley/react-table/issues/1657 Discussion: https://spectrum.chat/react-table/general/v7-... — committed to Cheetah0723/Table by Cheetah0723 5 years ago

Most upvoted comments

This issue still exist in v7.1.0. usePagination leads to Maximum update depth exceeded error. Since i’m using react@16.13.1, I had to rollback to v7.0.0-beta.19.

santamaria7 on Jun 9, 2020

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 notifications@github.com, 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.

tannerlinsley on Nov 29, 2019

@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).

androsj on Nov 29, 2019