I created a Material UI table and added Pagination, but the row limit increases automatically when I click the back button. I tried checking it on Material UI docs but they are also having the same issue could anyone guide me with that I have added a link here, click on the next button till the end of the pagination 55 after that go back when reached on page 6-10 the row limit increase automatically

https://codesandbox.io/s/inspiring-gauss-e0x198

help me out with this Thank you

CodePudding user response：

Actually, it appears that the row limit has increased but, it hasn't.

What you see are duplicate rows caused by duplicate identifiers in the provided Data. (Notice the Oreo).

Duplicate Identifiers can prevent the Grid from hiding the rows from the view when navigating.

Here is an example without the duplicates: https://codesandbox.io/s/runtime-river-3bwufj?file=/demo.tsx

CodePudding user response：

Please avoid using duplicate keys while mapping to elements. Because you are passing "Oreo" i.e. row.name as key for your TableRow element, the DOM creates duplicate of the same row as it is unable to identify the difference and renders a new copy of the same element.