After upgrading to v5.5.5, the Menu in AppHeader causes React to redraw frequently

[GZTimeWalker]

What package has an issue

@mantine/core

Describe the bug

After upgrade to v5.5.5, all the pages had 100% CPU usage, and the problem disappeared after the downgrade to v5.5.4

It seems to be caused by MenuItem and Box, in the last version these functions were no more than 10ms

What version of @mantine/hooks page do you have in package.json?

^5.5.5

If possible, please include a link to a codesandbox with the reproduced problem

• https://codesandbox.io/s/quirky-yalow-373rs0?file=/src/Header.tsx

Do you know how to fix the issue

No response

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

No response

[rtivital]

There were no changes to these components in 5.5.5 release. I also cannot reproduce any performance issues in the sandbox – https://codesandbox.io/s/dreamy-dijkstra-mche2z?file=/src/App.tsx
Most likely the issue is on your side.

[GZTimeWalker]

Ok, I'm gonna find out what happened in the sandbox, catch you later.

[GZTimeWalker]

There were no changes to these components in 5.5.5 release. I also cannot reproduce any performance issues in the sandbox – https://codesandbox.io/s/dreamy-dijkstra-mche2z?file=/src/App.tsx Most likely the issue is on your side.

Here you are.

• https://codesandbox.io/s/quirky-yalow-373rs0?file=/src/Header.tsx

[GZTimeWalker]

It may be related to #2646 and #2690

[rtivital]

https://codesandbox.io/s/vigilant-roman-fi3xhx?file=/src/Header.tsx

[GZTimeWalker]

https://codesandbox.io/s/vigilant-roman-fi3xhx?file=/src/Header.tsx

thx, it works now.

[fdb75017]

Hello @rtivital , I'm having an issue that I think is linked here, see:
https://codesandbox.io/s/happy-dawn-84oqzm?file=/src/App.js

Not exactly trying to have a "controlled" menu, but rather just register when it is opened. It seems as soon as I attach the onOpen event, the Menu starts to behave strangely. When the button is clicked the first time, the onOpen callback gets fired but the Menu does not open. If I click a second time, then the menu opens. But it doesn't close if you click outside.

(happens since 5.5.5)

What do you think ? Maybe I'm misunderstanding the use of onOpen ?
Many thanks !

[rtivital]

Okay, I'll check that, thanks for reporting

[wes337]

Hello @rtivital , I'm having an issue that I think is linked here, see: https://codesandbox.io/s/happy-dawn-84oqzm?file=/src/App.js

Not exactly trying to have a "controlled" menu, but rather just register when it is opened. It seems as soon as I attach the onOpen event, the Menu starts to behave strangely. When the button is clicked the first time, the onOpen callback gets fired but the Menu does not open. If I click a second time, then the menu opens. But it doesn't close if you click outside.

(happens since 5.5.5)

What do you think ? Maybe I'm misunderstanding the use of onOpen ? Many thanks !

Is this the issue in question here? Is this the original issue from @GZTimeWalker about redrawing and using 100% CPU resolved?

[fdb75017]

I believe it's the same issue yes, materializing differently. The original issue is resolved by switching the state control from the Menu onOpen to the button onClick as suggested by @rtivital (which also probably makes the onOpen prop a bit obsolete). Also same issue as in #2690, where the solution was to switch to a direct control through the button.

Thanks a lot !

[atumas-bananamilk]

I face this issue when I add onChange to my Menu. Seems like the state becomes delayed by 1 step.
My version is way back but I still get the same issue as reported:
"@mantine/core": "^5.1.5"

[rtivital]

The changes were reverted, should be fixed on 5.5.6