Multiple Menus rendered to page causes Maximum update depth exceeded.

[IanVS]

Current behavior

In my app, I have a table and each row renders a kabab menu. I noticed recently that when there are more than ~20 rows, I get a warning in my browser console during dev:

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.

The exact number of menus needed seems to vary. In my app, it was 24, but in the codesandbox, it's something like 60.

Steps to reproduce the bug

1. Open sandbox: https://codesandbox.io/p/sandbox/affectionate-merkle-28qvm9
2. See console logs

Expected behavior

I think I should be able to render as many menus as needed.

Workaround

The menus still seem to work, but the warning is concerning.

#3214 (comment)

Possible solutions

No response

[jasikpark]

related to #3118 potentially

[diegohaz]

Passing unmountOnHide to Menu appears to resolve the problem. It's also better not to render everything all at once if you're dealing with so many rows.

However, the warning shouldn't be there. I'll investigate this.

[diegohaz]

I initially believed that #3241 had fixed this, but I was wrong. Nevertheless, it appears to be a false positive warning from React. I'll keep this open just in case.