Skip to content

Conversation

@Smert
Copy link

@Smert Smert commented Jun 20, 2024

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 added 3 commits January 30, 2024 21:06
# Conflicts:
#	packages/@mantine/core/src/core/styles-api/use-styles/use-styles.ts
#	packages/@mantine/core/src/core/utils/create-safe-context/create-safe-context.tsx
…nsformed-styles. Fixed useStyles after merge.
@Smert
Copy link
Author

Smert commented Jun 20, 2024

@2jordan3 sorry, I closed #5684 by accident.

Putting String(name) in the dependency array may not work as intended.
How about putting the value of name directly in the dependency array?

I think value of name couldn't be putting directly in the dependency array, because this array can have different size in renders.

How about use JSON.stringify(name)?

@2jordan3
Copy link

@2jordan3 sorry, I closed #5684 by accident.

Putting String(name) in the dependency array may not work as intended.
How about putting the value of name directly in the dependency array?

I think value of name couldn't be putting directly in the dependency array, because this array can have different size in renders.

How about use JSON.stringify(name)?

I see, that method seems better!

@Smert
Copy link
Author

Smert commented Jun 24, 2024

Fixed

@jvllmr
Copy link
Contributor

jvllmr commented May 6, 2025

Wow, that is actually a significant performance improvement. Maybe this can get merged someday? Would help a table heavy app I have a lot.

@WojakGra
Copy link
Contributor

Is there anything preventing this from being added to the codebase?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants