mantine icon indicating copy to clipboard operation
mantine copied to clipboard

Fix slow rerendering of large tables

Open Smert opened this issue 1 year ago • 0 comments

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:

Screenshot 2024-01-30 at 19 52 06

Memoizing of the context and useStyle can improve performance: Screenshot 2024-01-30 at 19 48 48

I can suggest my decision of this problem in the pull request. Maybe you have another ideas.

Smert avatar Jan 30 '24 20:01 Smert