svelte: Horrible performance when using flexRender()

[sledgehammer999]

Describe the bug

I am using the "sorting" example code for svelte as a basis.
The main issue is that the UI response is horrible for simply sorting a table.
It takes about 4 seconds to sort a table of 1'000 rows with flexRender().
Without flexRender() it instantaneous.

I am a web dev noob. I mainly do C++. I have no idea why the slowdown or how to fix it.
I hope that more knowledgeable people here can look into this and solve it.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/modest-voice-mxlcvx?file=%2Fsrc%2FApp.svelte%3A138%2C100

Steps to reproduce

I have modified it a bit to simplify the performance measurements:

1. I used keyed {#each}
2. I removed the footer
3. I made the table show 1'000 rows at once
4. I made a rudimentary function to measure the table component's update time

Here is my codesandbox fork with the changes.

Click on a header to sort the table.

With

{#each row.getVisibleCells() as cell (cell.id)}
  <td>
    <svelte:component this={flexRender(cell.column.columnDef.cell, cell.getContext())} />
  </td>
{/each}

it takes about 1760 ms to update according to the measuring function. If you count yourself, it takes about 4 seconds to visually update the table.

However changing the above code to

{#each row.getVisibleCells() as cell (cell.id)}
  <td>
    {cell.getValue()}
  </td>
{/each}

it takes about 18 ms to update according to the measuring function.

That's more than 200x performance gain!!! (4 seconds visual update as basis).

Expected behavior

Snappy UI with instant table sorting.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Win 10, Firefox 114.0

react-table version

8.9.4

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[sledgehammer999]

I forgot to mention that I also tried to profile it when using flexRender().
If I interpret correctly the profiling data, the most amount is spent in flush_render_callbacks() called from destroy_component(). Both of these are svelte internal functions.

[skokenes]

@sledgehammer999 any updates on this one?

[sledgehammer999]

@skokenes Nope. I am a JS and Svelte noob. I was hoping someone from the team to solve this.
You can "solve" this by directly formatting/rendering the values yourself without relying on <svelte:component> and flexRender(). I show an example of this in my first post.

[larzknoke]

For me the same. React + ChakraUI and I have a table with 280 rows. If I use flexRender to display custom components the performance when opening other Modals etc. is terrible. Without flexRender and only cell.getValue() the performance is good. But I need flexRender to display the components.

[mrceperka]

I have noticed the same problem. Even on small tables with 300 rows. But also have no idea how to fix this :(

[mrceperka]

I have a workaround. Instead of doing

<svelte:component this={flexRender(cell.column.columnDef.cell, cell.getContext())} />

I've started doing (https://github.com/twinstar-bosskills/twinstar-bosskills/blob/79c7c4a4ea4e5aa27d131a745871847a775f353c/src/lib/components/table/Table.svelte#L125)

<svelte:component this={result.component} {...result.props} />

where result.component is regular svelte component and result.props are props passed to that component.

You can check usage here - https://github.com/twinstar-bosskills/twinstar-bosskills/blob/79c7c4a4ea4e5aa27d131a745871847a775f353c/src/routes/%5B%5Brealm%3Drealm%5D%5D/boss-kills/%2Bpage.svelte#L74

I have not found any problems with this workaround but there might be some.