Unintended re-renders

[bastiankistner]

mantine-react-table version

beta

react & react-dom versions

19.0.0

Describe the bug and the steps to reproduce it

Hi there,

thanks so much for you effort you're putting into this lib! I was trying to set it up with in-row editing mode based on the example on your website. But I quickly discovered that rendering is really slow.

I isolated every part of it to figure out the reason for it. I moved all input fields into their own components and extracted the state into a zustand store. It helped a lot but even when I click the global filter or search buttons, the whole table re-renders, which causes a significant delay for the user. The same happened when the onBlur callbacks run, which is why I moved everything out of the creation of the table.

I also tried wrapping the whole MantineReactTable inside of React.memo but this causes the global actions not to execute at all.

I prepared a repo for it where you can see it for yourself. Just clone, run pnpm install && pnpm run dev and you should be able to see the lags. I also used react scan in my original repo to visualize the re-renders. I don't understand why the whole table re-renders each time. Maybe you have an idea. Or it is as intended, but in that case I might need to go with vanilla tanstack and implement the whole table myself.

Here is the link to the repo: https://github.com/bastiankistner/mantine-react-table-example

Thanks a lot!
Bastian

Minimal, Reproducible Example - (Optional, but Recommended)

https://github.com/bastiankistner/mantine-react-table-example

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

Maybe, I'll investigate and start debugging

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[Strustab]

Hello,

I'm able to reproduce your problem in my personal project, but there's more:

I have a similar problem when I use the column resize option. The behavior described in the documentation is that the table body is memoized when resizing. But on my side, no memoization is performed when I resize. I assume that the problem lies in the fact that no memoization is made when an external action updates part of the table.

If you try this example with react scan or the React Developer Tools extension, you can see that the entire body of the table is rerender: https://github.com/KevinVandy/mantine-react-table/tree/v2/apps/mantine-react-table-docs/examples/enable-column-resizing

This issues appears only in MRT v2 from what I've been able to test.

I haven't looked into why the behavior was lost when updating to v2, but if I get any clues, I'll comment here and try to make a PR.