mantine
mantine copied to clipboard
Fix slow rerendering of large tables
Hi! I have lags with rerendering of large tables with memoized rows:
const TestRow = memo(function Row() {
return (
<Table.Tr>
{new Array(10).fill(0).map((_, index) => (
<Table.Td key={index}>Cell</Table.Td>
))}
</Table.Tr>
);
});
function TestTable() {
const [counter, setCounter] = useState(0);
return (
<>
<p>Counter: {counter}</p>
<button onClick={() => setCounter(counter + 1)}>Increment</button>
<Table>
<Table.Tbody>
{new Array(1000).fill(0).map((_, index) => (
<TestRow key={index}/>
))}
</Table.Tbody>
</Table>
</>
);
}
Eventloop lags for 200ms when I click on the button in this simple example. But all rows are memoized.
I noticed then TableContext have a new value every render. It leads to rerender of Table.Tr and Table.Td:
Memoizing of the context and useStyle can improve performance:
I can suggest my decision of this problem in the pull request. Maybe you have another ideas.