Dev running slow

[DavidWells]

Prod seems to run fine https://mantine-next-example.netlify.app (only when dev tools not open)

But dev on localhost:3000 is very lagged (when dev tools open)

Seeing these warnings when clicking checkboxes or attempting to input text to input

[Violation] 'input' handler took 935ms
[Violation] 'input' handler took 951ms
react-dom.development.js?61bb:3942 [Violation] 'input' handler took 910ms
[Violation] 'input' handler took 923ms
react-dom.development.js?61bb:3942 [Violation] 'input' handler took 1085ms
[Violation] 'input' handler took 1097ms
react-dom.development.js?61bb:3942 [Violation] 'input' handler took 1260ms
[Violation] 'input' handler took 1296ms
react-dom.development.js?61bb:3942 [Violation] 'input' handler took 1113ms
[Violation] 'input' handler took 1126ms
react-dom.development.js?61bb:3942 [Violation] 'input' handler took 1247ms
[Violation] 'input' handler took 1262ms

To Repro

1. Clone repo && npm install
2. Start app npm run dev and open dev tools and click around / try to insert text

[DavidWells]

I can repro this on the main docs https://mantine.dev/pages/examples

https://github.com/mantinedev/mantine

Perhaps this is an issue with underlying CSS implementation. They are using https://github.com/cssinjs/jss

[rtivital]

Hi David, thanks for mentioning that, your video helped me to find out about issue. I've managed to solve it with use-memo hook, here is full explanation and possible solution for react-jss library if you are interested – cssinjs/jss#1510

Performance fix will be released in Mantine 1.1.0 (at the end of May). Thanks for trying Mantine out!

[DavidWells]

Oh awesome! Thanks @rtivital !

I will keep an eye out for the release 😃

https://github.com/mantinedev/mantine is fantastic BTW. Such clean code + solid component APIs 😍